diff --git a/web/gui2/src/main/webapp/tests/app/consolelogger.service.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/consolelogger.service.spec.ts
similarity index 93%
rename from web/gui2/src/main/webapp/tests/app/consolelogger.service.spec.ts
rename to web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/consolelogger.service.spec.ts
index 1b01809..bbb8974 100644
--- a/web/gui2/src/main/webapp/tests/app/consolelogger.service.spec.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/consolelogger.service.spec.ts
@@ -15,7 +15,7 @@
  */
 import { TestBed, inject } from '@angular/core/testing';
 
-import { ConsoleLoggerService } from '../../app/consolelogger.service';
+import { ConsoleLoggerService } from './consolelogger.service';
 
 /**
  * ONOS GUI -- Console Logger Service - Unit Tests
diff --git a/web/gui2/src/main/webapp/tests/app/detectbrowser.directive.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/detectbrowser.directive.spec.ts
similarity index 87%
rename from web/gui2/src/main/webapp/tests/app/detectbrowser.directive.spec.ts
rename to web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/detectbrowser.directive.spec.ts
index 37f4a8e..3faa7f1 100644
--- a/web/gui2/src/main/webapp/tests/app/detectbrowser.directive.spec.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/detectbrowser.directive.spec.ts
@@ -15,12 +15,12 @@
  */
 import { TestBed, inject } from '@angular/core/testing';
 
-import { LogService } from '../../app/log.service';
-import { ConsoleLoggerService } from '../../app/consolelogger.service';
-import { DetectBrowserDirective } from '../../app/detectbrowser.directive';
+import { LogService } from './log.service';
+import { ConsoleLoggerService } from './consolelogger.service';
+import { DetectBrowserDirective } from './detectbrowser.directive';
 import { ActivatedRoute, Params } from '@angular/router';
-import { FnService } from '../../app/fw/util/fn.service';
-import { OnosService } from '../../app/onos.service';
+import { FnService } from './util/fn.service';
+import { OnosService } from './onos.service';
 import { of } from 'rxjs';
 
 class MockFnService extends FnService {
diff --git a/web/gui2/src/main/webapp/tests/app/fw/layer/loading.service.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading.service.spec.ts
similarity index 74%
rename from web/gui2/src/main/webapp/tests/app/fw/layer/loading.service.spec.ts
rename to web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading.service.spec.ts
index 92655fa..404439f 100644
--- a/web/gui2/src/main/webapp/tests/app/fw/layer/loading.service.spec.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading.service.spec.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.
@@ -15,12 +15,12 @@
  */
 import { TestBed, inject } from '@angular/core/testing';
 
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { LoadingService } from '../../../../app/fw/layer/loading.service';
-import { FnService } from '../../../../app/fw/util/fn.service';
-import { ThemeService } from '../../../../app/fw/util/theme.service';
-import { WebSocketService } from '../../../../app/fw/remote/websocket.service';
+import { LogService } from '../log.service';
+import { ConsoleLoggerService } from '../consolelogger.service';
+import { LoadingService } from './loading.service';
+import { FnService } from '../util/fn.service';
+import { ThemeService } from '../util/theme.service';
+import { WebSocketService } from '../remote/websocket.service';
 
 class MockFnService {
     debug() {
diff --git a/web/gui2/src/main/webapp/tests/app/log.service.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/log.service.spec.ts
similarity index 94%
rename from web/gui2/src/main/webapp/tests/app/log.service.spec.ts
rename to web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/log.service.spec.ts
index 5307028..e2998f8 100644
--- a/web/gui2/src/main/webapp/tests/app/log.service.spec.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/log.service.spec.ts
@@ -15,7 +15,7 @@
  */
 import { TestBed, inject } from '@angular/core/testing';
 
-import { LogService } from '../../app/log.service';
+import { LogService } from './log.service';
 
 /**
  * ONOS GUI -- Log Service - Unit Tests
diff --git a/web/gui2/src/main/webapp/tests/app/fw/mast/mast.service.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast.service.spec.ts
similarity index 78%
rename from web/gui2/src/main/webapp/tests/app/fw/mast/mast.service.spec.ts
rename to web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast.service.spec.ts
index 5c00e67..ca99af8 100644
--- a/web/gui2/src/main/webapp/tests/app/fw/mast/mast.service.spec.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast.service.spec.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.
@@ -15,10 +15,10 @@
  */
 import { TestBed, inject } from '@angular/core/testing';
 
-import { MastService } from '../../../../app/fw/mast/mast.service';
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { FnService } from '../../../../app/fw/util/fn.service';
+import { MastService } from './mast.service';
+import { LogService } from '../log.service';
+import { ConsoleLoggerService } from '../consolelogger.service';
+import { FnService } from '../util/fn.service';
 
 class MockFnService {
     isMobile() {}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.component.css b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.component.css
index 5b2d464..a767b2e 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.component.css
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.component.css
@@ -1,5 +1,5 @@
 /*
- * Copyright 2014-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.
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.component.html b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.component.html
index 2d4e606..437f96d 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.component.html
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.component.html
@@ -1,5 +1,5 @@
 <!--
-~ Copyright 2014-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.
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.component.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.component.spec.ts
index fe424e7..fca2dd9 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.component.spec.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.component.spec.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.
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.component.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.component.ts
index e8e5fec..41e2f3e 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.component.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.component.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright 2014-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.
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.theme.css b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.theme.css
index 6b92beb..968aefa 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.theme.css
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/mast/mast/mast.theme.css
@@ -1,5 +1,5 @@
 /*
- * Copyright 2016-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.
diff --git a/web/gui2/src/main/webapp/tests/app/fw/nav/nav.service.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/nav/nav.service.spec.ts
similarity index 73%
rename from web/gui2/src/main/webapp/tests/app/fw/nav/nav.service.spec.ts
rename to web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/nav/nav.service.spec.ts
index 44920df..88ab5fa 100644
--- a/web/gui2/src/main/webapp/tests/app/fw/nav/nav.service.spec.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/nav/nav.service.spec.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.
@@ -14,14 +14,18 @@
  * limitations under the License.
  */
 import { TestBed, inject } from '@angular/core/testing';
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { NavService } from '../../../../app/fw/nav/nav.service';
-import { FnService } from '../../../../app/fw/util/fn.service';
+import { LogService } from '../log.service';
+import { ConsoleLoggerService } from '../consolelogger.service';
+import { NavService } from './nav.service';
+import { FnService } from '../util/fn.service';
 
 class MockFnService {}
 
+class MockHttpClient {}
+
+
 /**
  * ONOS GUI -- Util -- Navigation Service - Unit Tests
  */
@@ -33,6 +37,7 @@
 
         TestBed.configureTestingModule({
             providers: [NavService,
+                { provide: HttpClient, useClass: MockHttpClient },
                 { provide: FnService, useClass: MockFnService },
                 { provide: LogService, useValue: log },
             ]
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/nav/nav.service.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/nav/nav.service.ts
index a24f242..6e96309 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/nav/nav.service.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/nav/nav.service.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.
diff --git a/web/gui2/src/main/webapp/tests/app/fw/svg/glyph.service.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/glyph.service.spec.ts
similarity index 78%
rename from web/gui2/src/main/webapp/tests/app/fw/svg/glyph.service.spec.ts
rename to web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/glyph.service.spec.ts
index 538cd9f..5b4669d 100644
--- a/web/gui2/src/main/webapp/tests/app/fw/svg/glyph.service.spec.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/glyph.service.spec.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.
@@ -15,10 +15,10 @@
  */
 import { TestBed, inject } from '@angular/core/testing';
 
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { GlyphService } from '../../../../app/fw/svg/glyph.service';
-import { FnService } from '../../../../app/fw/util/fn.service';
+import { LogService } from '../log.service';
+import { ConsoleLoggerService } from '../consolelogger.service';
+import { GlyphService } from './glyph.service';
+import { FnService } from '../util/fn.service';
 
 class MockFnService {}
 
diff --git a/web/gui2/src/main/webapp/tests/app/fw/svg/glyphdata.service.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/glyphdata.service.spec.ts
similarity index 80%
rename from web/gui2/src/main/webapp/tests/app/fw/svg/glyphdata.service.spec.ts
rename to web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/glyphdata.service.spec.ts
index 5fbf137..ab770d5 100644
--- a/web/gui2/src/main/webapp/tests/app/fw/svg/glyphdata.service.spec.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/glyphdata.service.spec.ts
@@ -1,5 +1,5 @@
 /*
- *  Copyright 2016-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.
@@ -15,9 +15,9 @@
  */
 import { TestBed, inject } from '@angular/core/testing';
 
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { GlyphDataService } from '../../../../app/fw/svg/glyphdata.service';
+import { LogService } from '..//log.service';
+import { ConsoleLoggerService } from '../consolelogger.service';
+import { GlyphDataService } from './glyphdata.service';
 
 /**
  * ONOS GUI -- SVG -- Glyph Data Service - Unit Tests
diff --git a/web/gui2/src/main/webapp/tests/app/fw/svg/icon.service.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon.service.spec.ts
similarity index 76%
rename from web/gui2/src/main/webapp/tests/app/fw/svg/icon.service.spec.ts
rename to web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon.service.spec.ts
index e6e54dc..094baef 100644
--- a/web/gui2/src/main/webapp/tests/app/fw/svg/icon.service.spec.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon.service.spec.ts
@@ -1,5 +1,5 @@
 /*
- *  Copyright 2016-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.
@@ -15,11 +15,11 @@
  */
 import { TestBed, inject } from '@angular/core/testing';
 
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { IconService } from '../../../../app/fw/svg/icon.service';
-import { GlyphService } from '../../../../app/fw/svg/glyph.service';
-import { SvgUtilService } from '../../../../app/fw/svg/svgutil.service';
+import { LogService } from '../log.service';
+import { ConsoleLoggerService } from '../consolelogger.service';
+import { IconService } from './icon.service';
+import { GlyphService } from './glyph.service';
+import { SvgUtilService } from './svgutil.service';
 
 class MockGlyphService {}
 
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon.service.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon.service.ts
index 6ced162..73480ed 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon.service.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon.service.ts
@@ -43,6 +43,7 @@
     ['m_ports', 'm_ports'],
 
     ['topo', 'topo'],
+    ['bird', 'bird'],
 
     ['refresh', 'refresh'],
     ['query', 'query'],
diff --git a/web/gui2/src/main/webapp/tests/app/fw/svg/icon/icon.component.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.spec.ts
similarity index 70%
rename from web/gui2/src/main/webapp/tests/app/fw/svg/icon/icon.component.spec.ts
rename to web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.spec.ts
index 3ca58e3..8234551 100644
--- a/web/gui2/src/main/webapp/tests/app/fw/svg/icon/icon.component.spec.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/icon/icon.component.spec.ts
@@ -1,9 +1,9 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { LogService } from '../../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../../app/consolelogger.service';
-import { IconComponent } from '../../../../../app/fw/svg/icon/icon.component';
-import { IconService } from '../../../../../app/fw/svg/icon.service';
+import { LogService } from '../../log.service';
+import { ConsoleLoggerService } from '../../consolelogger.service';
+import { IconComponent } from './icon.component';
+import { IconService } from '../icon.service';
 
 class MockIconService {}
 
diff --git a/web/gui2/src/main/webapp/tests/app/fw/svg/svgutil.service.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/svgutil.service.spec.ts
similarity index 78%
rename from web/gui2/src/main/webapp/tests/app/fw/svg/svgutil.service.spec.ts
rename to web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/svgutil.service.spec.ts
index 593f5ad..7165b33 100644
--- a/web/gui2/src/main/webapp/tests/app/fw/svg/svgutil.service.spec.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/svgutil.service.spec.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.
@@ -15,10 +15,10 @@
  */
 import { TestBed, inject } from '@angular/core/testing';
 
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { SvgUtilService } from '../../../../app/fw/svg/svgutil.service';
-import { FnService } from '../../../../app/fw/util/fn.service';
+import { LogService } from '../log.service';
+import { ConsoleLoggerService } from '../consolelogger.service';
+import { SvgUtilService } from './svgutil.service';
+import { FnService } from '../util/fn.service';
 
 class MockFnService {}
 
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/svgutil.service.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/svgutil.service.ts
index 13327fe..6107d16 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/svgutil.service.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/svgutil.service.ts
@@ -16,6 +16,7 @@
 import { Injectable } from '@angular/core';
 import { FnService } from '../util/fn.service';
 import { LogService } from '../log.service';
+import * as d3 from 'd3';
 
 /**
  * ONOS GUI -- SVG -- Util Service
@@ -26,11 +27,45 @@
     providedIn: 'root',
 })
 export class SvgUtilService {
+    lightNorm: string[];
+    lightMute: string[];
+    darkNorm: string[];
+    darkMute: string[];
+    colors: any;
 
     constructor(
         private fs: FnService,
         private log: LogService
     ) {
+
+        // --- Ordinal scales for 7 values.
+        // TODO: migrate these colors to the theme service.
+
+        // Colors per Mojo-Design's color palette.. (version one)
+        //               blue       red        dk grey    steel      lt blue    lt red     lt grey
+        // var lightNorm = ['#5b99d2', '#d05a55', '#716b6b', '#7e9aa8', '#66cef6', '#db7773', '#aeada8' ],
+        //     lightMute = ['#a8cceb', '#f1a7a7', '#b9b5b5', '#bdcdd5', '#a8e9fd', '#f8c9c9', '#d7d6d4' ],
+
+        // Colors per Mojo-Design's color palette.. (version two)
+        //               blue       lt blue    red        green      brown      teal       lime
+        this.lightNorm = ['#5b99d2', '#66cef6', '#d05a55', '#0f9d58', '#ba7941', '#3dc0bf', '#56af00'];
+        this.lightMute = ['#9ebedf', '#abdef5', '#d79a96', '#7cbe99', '#cdab8d', '#96d5d5', '#a0c96d'];
+
+        this.darkNorm = ['#5b99d2', '#66cef6', '#d05a55', '#0f9d58', '#ba7941', '#3dc0bf', '#56af00'];
+        this.darkMute = ['#9ebedf', '#abdef5', '#d79a96', '#7cbe99', '#cdab8d', '#96d5d5', '#a0c96d'];
+
+
+        this.colors = {
+            light: {
+                norm: d3.scaleOrdinal().range(this.lightNorm),
+                mute: d3.scaleOrdinal().range(this.lightMute),
+            },
+            dark: {
+                norm: d3.scaleOrdinal().range(this.darkNorm),
+                mute: d3.scaleOrdinal().range(this.darkMute),
+            },
+        };
+
         this.log.debug('SvgUtilService constructed');
     }
 
@@ -40,4 +75,91 @@
         }
         return 'translate(' + x + ',' + y + ')';
     }
+
+    scale(x, y) {
+        return 'scale(' + x + ',' + y + ')';
+    }
+
+    skewX(x) {
+        return 'skewX(' + x + ')';
+    }
+
+    rotate(deg) {
+        return 'rotate(' + deg + ')';
+    }
+
+    cat7() {
+        const tcid = 'd3utilTestCard';
+
+        function getColor(id, muted, theme) {
+            // NOTE: since we are lazily assigning domain ids, we need to
+            //       get the color from all 4 scales, to keep the domains
+            //       in sync.
+            const ln = this.colors.light.norm(id);
+            const lm = this.colors.light.mute(id);
+            const dn = this.colors.dark.norm(id);
+            const dm = this.colors.dark.mute(id);
+            if (theme === 'dark') {
+                return muted ? dm : dn;
+            } else {
+                return muted ? lm : ln;
+            }
+        }
+
+        function testCard(svg) {
+            let g = svg.select('g#' + tcid);
+            const dom = d3.range(7);
+            let k;
+            let muted;
+            let theme;
+            let what;
+
+            if (!g.empty()) {
+                g.remove();
+
+            } else {
+                g = svg.append('g')
+                    .attr('id', tcid)
+                    .attr('transform', 'scale(4)translate(20,20)');
+
+                for (k = 0; k < 4; k++) {
+                    muted = k % 2;
+                    what = muted ? ' muted' : ' normal';
+                    theme = k < 2 ? 'light' : 'dark';
+                    dom.forEach(function (id, i) {
+                        const x = i * 20;
+                        const y = k * 20;
+                        const f = getColor(id, muted, theme);
+                        g.append('circle').attr({
+                            cx: x,
+                            cy: y,
+                            r: 5,
+                            fill: f,
+                        });
+                    });
+                    g.append('rect').attr({
+                        x: 140,
+                        y: k * 20 - 5,
+                        width: 32,
+                        height: 10,
+                        rx: 2,
+                        fill: '#888',
+                    });
+                    g.append('text').text(theme + what)
+                        .attr({
+                            x: 142,
+                            y: k * 20 + 2,
+                            fill: 'white',
+                        })
+                        .style('font-size', '4pt');
+                }
+            }
+        }
+
+        return {
+            testCard: testCard,
+            getColor: getColor,
+        };
+    }
+
 }
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/zoom.service.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/zoom.service.spec.ts
new file mode 100644
index 0000000..fe25860
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/zoom.service.spec.ts
@@ -0,0 +1,193 @@
+/*
+ * 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 { TestBed, inject } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { of } from 'rxjs';
+import * as d3 from 'd3';
+
+import { LogService } from '../log.service';
+import { FnService } from '../util/fn.service';
+
+import { ZoomService, CZ, D3S, ZoomOpts, Zoomer } from './zoom.service';
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
+
+
+/**
+ * ONOS GUI -- SVG -- Zoom Service - Unit Tests
+ */
+describe('ZoomService', () => {
+    let zs: ZoomService;
+    let ar: ActivatedRoute;
+    let fs: FnService;
+    let mockWindow: Window;
+    let logServiceSpy: jasmine.SpyObj<LogService>;
+
+    const svg = d3.select('body').append('svg').attr('id', 'mySvg');
+    const zoomLayer = svg.append('g').attr('id', 'myZoomlayer');
+
+    beforeEach(() => {
+        const logSpy = jasmine.createSpyObj('LogService', ['debug', 'warn', 'error']);
+        ar = new MockActivatedRoute({'debug': 'TestService'});
+        mockWindow = <any>{
+            innerWidth: 400,
+            innerHeight: 200,
+            navigator: {
+                userAgent: 'defaultUA'
+            }
+        };
+        fs = new FnService(ar, logSpy, mockWindow);
+
+        TestBed.configureTestingModule({
+            providers: [ ZoomService,
+                { provide: FnService, useValue: fs },
+                { provide: LogService, useValue: logSpy },
+                { provide: ActivatedRoute, useValue: ar },
+                { provide: 'Window', useFactory: (() => mockWindow ) }
+            ]
+        });
+
+        zs = TestBed.get(ZoomService);
+        logServiceSpy = TestBed.get(LogService);
+    });
+
+    it('should be created', () => {
+        expect(zs).toBeTruthy();
+    });
+
+    it('should define ZoomService', function () {
+        expect(zs).toBeDefined();
+    });
+
+    it('should define api functions', function () {
+        expect(fs.areFunctions(zs, [
+            'createZoomer',
+            'zoomed',
+            'adjustZoomLayer'
+        ])).toBeTruthy();
+    });
+
+    function verifyZoomerApi() {
+        expect(fs.areFunctions(zs.zoomer, [
+            'panZoom', 'reset', 'translate', 'scale', 'scaleExtent'
+        ])).toBeTruthy();
+    }
+
+    it('should fail gracefully with no option object', function () {
+        expect(() => zs.createZoomer(<ZoomOpts>{}))
+            .toThrow(new Error(CZ + 'No "svg" (svg tag)' + D3S));
+        expect(logServiceSpy.error)
+            .toHaveBeenCalledWith(CZ + 'No "svg" (svg tag)' + D3S);
+    });
+
+    it('should complain if we miss required options', function () {
+        expect(() => zs.createZoomer(<ZoomOpts>{svg: svg}))
+            .toThrow(new Error(CZ + 'No "zoomLayer" (g tag)' + D3S));
+        expect(logServiceSpy.error).toHaveBeenCalledWith(CZ + 'No "zoomLayer" (g tag)' + D3S);
+    });
+
+    it('should work with minimal parameters', function () {
+        const zoomer = zs.createZoomer(<ZoomOpts>{
+            svg: svg,
+            zoomLayer: zoomLayer
+        });
+        expect(logServiceSpy.error).not.toHaveBeenCalled();
+        verifyZoomerApi();
+    });
+
+    it('should start at scale 1 and translate 0,0', function () {
+        const zoomer = zs.createZoomer(<ZoomOpts>{
+            svg: svg,
+            zoomLayer: zoomLayer
+        });
+        verifyZoomerApi();
+        expect(zoomer.translate()).toEqual([0, 0]);
+        expect(zoomer.scale()).toEqual(1);
+    });
+
+    it('should allow programmatic pan/zoom', function () {
+        const zoomer: Zoomer = zs.createZoomer(<ZoomOpts>{
+            svg: svg,
+            zoomLayer: zoomLayer
+        });
+        verifyZoomerApi();
+
+        expect(zoomer.translate()).toEqual([0, 0]);
+        expect(zoomer.scale()).toEqual(1);
+
+        zoomer.panZoom([20, 30], 1);
+        expect(zoomer.translate()).toEqual([20, 30]);
+        expect(zoomer.scale()).toEqual(1);
+
+        zoomer.reset();
+        expect(zoomer.translate()).toEqual([0, 0]);
+        expect(zoomer.scale()).toEqual(1);
+
+
+    });
+
+    it('should provide default scale extent', function () {
+        const zoomer = zs.createZoomer(<ZoomOpts>{
+            svg: svg,
+            zoomLayer: zoomLayer
+        });
+        expect(zoomer.scaleExtent()).toEqual([0.05, 50]);
+    });
+
+    it('should allow us to override the minimum zoom', function () {
+        const zoomer = zs.createZoomer(<ZoomOpts>{
+            svg: svg,
+            zoomLayer: zoomLayer,
+            zoomMin: 1.23
+        });
+        expect(zoomer.scaleExtent()).toEqual([1.23, 50]);
+    });
+
+    it('should allow us to override the maximum zoom', function () {
+        const zoomer = zs.createZoomer(<ZoomOpts>{
+            svg: svg,
+            zoomLayer: zoomLayer,
+            zoomMax: 13
+        });
+        expect(zoomer.scaleExtent()).toEqual([0.05, 13]);
+    });
+
+    // TODO: test zoomed() where we fake out the d3.event.sourceEvent etc...
+    //  need to check default enabled (true) and custom enabled predicate
+    //  need to check that the callback is invoked also
+
+    it('should invoke the callback on programmatic pan/zoom', function () {
+        const foo = { cb() { return; } };
+        spyOn(foo, 'cb');
+
+        const zoomer = zs.createZoomer(<ZoomOpts>{
+            svg: svg,
+            zoomMin: 0.25,
+            zoomMax: 10,
+            zoomLayer: zoomLayer,
+            zoomEnabled: (ev) => true,
+            zoomCallback: foo.cb,
+        });
+
+        zoomer.panZoom([0, 0], 2);
+        expect(foo.cb).toHaveBeenCalled();
+    });
+});
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/zoom.service.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/zoom.service.ts
new file mode 100644
index 0000000..fdf08f9
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/zoom.service.ts
@@ -0,0 +1,148 @@
+/*
+ * 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 { Injectable } from '@angular/core';
+import * as d3 from 'd3';
+import { LogService } from '../log.service';
+
+export interface ZoomOpts {
+    svg: any;                         // D3 selection of <svg> element
+    zoomLayer: any;                   // D3 selection of <g> element
+    zoomMin: number;                  // Min zoom level - usually 0.25
+    zoomMax: number;                  // Max zoom level - usually 10
+    zoomEnabled(ev: any): boolean;   // Function that takes event and returns boolean
+    zoomCallback(translate: number[], scale: number): void; // Function that is called on zoom
+}
+
+export interface Zoomer {
+    panZoom(translate: number[], scale: number, transition?: number): void;
+    reset(): void;
+    translate(): number[];
+    scale(): number;
+    scaleExtent(): number[];
+}
+
+export const CZ: string = 'ZoomService.createZoomer(): ';
+export const D3S: string = ' (D3 selection) property defined';
+
+/**
+ * ONOS GUI -- Topology Zoom Service Module.
+ */
+@Injectable({
+    providedIn: 'root',
+})
+export class ZoomService {
+    defaultSettings: ZoomOpts;
+
+    zoom: any;
+    public zoomer: Zoomer;
+    settings: ZoomOpts;
+
+    constructor(
+        protected log: LogService,
+    ) {
+        this.defaultSettings = <ZoomOpts>{
+            zoomMin: 0.05,
+            zoomMax: 50,
+            zoomEnabled: (ev) => true,
+            zoomCallback: (t, s) => { return; }
+        };
+
+        this.log.debug('ZoomService constructed');
+    }
+
+    createZoomer(opts: ZoomOpts): Zoomer {
+        this.settings = Object.assign(this.defaultSettings, opts);
+
+        if (!this.settings.svg) {
+            this.log.error(CZ + 'No "svg" (svg tag)' + D3S);
+            throw new Error(CZ + 'No "svg" (svg tag)' + D3S);
+        }
+        if (!this.settings.zoomLayer) {
+            this.log.error(CZ + 'No "zoomLayer" (g tag)' + D3S);
+            throw new Error(CZ + 'No "zoomLayer" (g tag)' + D3S);
+        }
+
+        this.zoom = d3.zoom()
+            .scaleExtent([this.settings.zoomMin, this.settings.zoomMax])
+            .extent([[0, 0], [1000, 1000]])
+            .on('zoom', () => this.zoomed);
+
+
+        this.zoomer = <Zoomer>{
+            panZoom: (translate: number[], scale: number, transition?: number) => {
+                this.settings.svg.call(this.zoom.translateBy, translate[0], translate[1]);
+                this.settings.svg.call(this.zoom.scaleTo, scale);
+                this.adjustZoomLayer(translate, scale, transition);
+            },
+
+            reset: () => {
+                this.settings.svg.call(this.zoom.translateTo, 500, 500);
+                this.settings.svg.call(this.zoom.scaleTo, 1);
+                this.adjustZoomLayer([0, 0], 1, 0);
+            },
+
+            translate: () => {
+                const trans = d3.zoomTransform(this.settings.svg.node());
+                return [trans.x, trans.y];
+            },
+
+            scale: () => {
+                const trans = d3.zoomTransform(this.settings.svg.node());
+                return trans.k;
+            },
+
+            scaleExtent: () => {
+                return this.zoom.scaleExtent();
+            },
+        };
+
+        // apply the zoom behavior to the SVG element
+/*
+        if (this.settings.svg ) {
+            this.settings.svg.call(this.zoom);
+        }
+*/
+        // Remove zoom on double click (prevents a
+        // false zoom navigating regions)
+        this.settings.svg.on('dblclick.zoom', null);
+
+        return this.zoomer;
+    }
+
+    /**
+     * zoom events from mouse gestures...
+     */
+    zoomed() {
+        const ev = d3.event.sourceEvent;
+        if (this.settings.zoomEnabled(ev)) {
+            this.adjustZoomLayer(d3.event.translate, d3.event.scale);
+        }
+    }
+
+    /**
+     * Adjust the zoom layer
+     */
+    adjustZoomLayer(translate: number[], scale: number, transition?: any): void {
+
+        this.settings.zoomLayer.transition()
+            .duration(transition || 0)
+            .attr('transform',
+                'translate(' + translate + ') scale(' + scale + ')');
+
+        this.settings.zoomCallback(translate, scale);
+    }
+
+}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/fn.service.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/fn.service.spec.ts
index 5b86d56..e9b7c2a 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/fn.service.spec.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/fn.service.spec.ts
@@ -235,7 +235,8 @@
             'isFirefox', 'parseDebugFlags',
             'debugOn', 'debug', 'find', 'inArray', 'removeFromArray',
             'isEmptyObject', 'cap', 'noPx', 'noPxStyle', 'endsWith',
-            'inEvilList', 'analyze', 'sanitize', 'sameObjProps', 'containsObj'
+            'inEvilList', 'analyze', 'sanitize', 'sameObjProps', 'containsObj',
+            'addToTrie', 'removeFromTrie', 'trieLookup'
 //            'find', 'inArray', 'removeFromArray', 'isEmptyObject', 'sameObjProps', 'containsObj', 'cap',
 //            'eecode', 'noPx', 'noPxStyle', 'endsWith', 'addToTrie', 'removeFromTrie', 'trieLookup',
 //            'classNames', 'extend', 'sanitize'
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/fn.service.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/fn.service.ts
index 506ce74..60d4950 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/fn.service.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/fn.service.ts
@@ -13,9 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Injectable, Inject } from '@angular/core';
-import { ActivatedRoute, Router} from '@angular/router';
-import { LogService } from '../log.service';
+import {Inject, Injectable} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {LogService} from '../log.service';
+import {Trie, TrieOp} from './trie';
 
 // Angular>=2 workaround for missing definition
 declare const InstallTrigger: any;
@@ -40,112 +41,6 @@
     name: string;
 }
 
-// TODO Move all this trie stuff to its own class
-// Angular>=2 Tightened up on types to avoid compiler errors
-interface TrieC {
-    p: any;
-    s: string[];
-}
-// trie operation
-function _trieOp(op: string, trie, word: string, data) {
-    const p = trie;
-    const w: string = word.toUpperCase();
-    const s: Array<string> = w.split('');
-    let c: TrieC = { p: p, s: s };
-    let t = [];
-    let  x = 0;
-    const f1 = op === '+' ? add : probe;
-    const f2 = op === '+' ? insert : remove;
-
-    function add(cAdded): TrieC {
-        const q = cAdded.s.shift();
-        let np = cAdded.p[q];
-
-        if (!np) {
-            cAdded.p[q] = {};
-            np = cAdded.p[q];
-            x = 1;
-        }
-        return { p: np, s: cAdded.s };
-    }
-
-    function probe(cProbed): TrieC {
-        const q = cProbed.s.shift();
-        const k: number = Object.keys(cProbed.p).length;
-        const np = cProbed.p[q];
-
-        t.push({ q: q, k: k, p: cProbed.p });
-        if (!np) {
-            t = [];
-            return { p: [], s: [] };
-        }
-        return { p: np, s: cProbed.s };
-    }
-
-    function insert() {
-        c.p._data = data;
-        return x ? 'added' : 'updated';
-    }
-
-    function remove() {
-        if (t.length) {
-            t = t.reverse();
-            while (t.length) {
-                const d = t.shift();
-                delete d.p[d.q];
-                if (d.k > 1) {
-                    t = [];
-                }
-            }
-            return 'removed';
-        }
-        return 'absent';
-    }
-
-    while (c.s.length) {
-        c = f1(c);
-    }
-    return f2();
-}
-
-// add word to trie (word will be converted to uppercase)
-// data associated with the word
-// returns 'added' or 'updated'
-function addToTrie(trie, word, data) {
-    return _trieOp('+', trie, word, data);
-}
-
-// remove word from trie (word will be converted to uppercase)
-// returns 'removed' or 'absent'
-// Angular>=2 added in quotes for data. error TS2554: Expected 4 arguments, but got 3.
-function removeFromTrie(trie, word) {
-    return _trieOp('-', trie, word, '');
-}
-
-// lookup word (converted to uppercase) in trie
-// returns:
-//    undefined if the word is not in the trie
-//    -1 for a partial match (word is a prefix to an existing word)
-//    data for the word for an exact match
-function trieLookup(trie, word) {
-    const s = word.toUpperCase().split('');
-    let p = trie;
-    let n;
-
-    while (s.length) {
-        n = s.shift();
-        p = p[n];
-        if (!p) {
-            return undefined;
-        }
-    }
-    if (p._data) {
-        return p._data;
-    }
-    return -1;
-}
-
-
 /**
  * ONOS GUI -- Util -- General Purpose Functions
  */
@@ -561,4 +456,46 @@
         return html;
     }
 
+    /**
+     * add word to trie (word will be converted to uppercase)
+     * data associated with the word
+     * returns 'added' or 'updated'
+     */
+    addToTrie(trie, word, data) {
+        return new Trie(TrieOp.PLUS, trie, word, data);
+    }
+
+    /**
+     * remove word from trie (word will be converted to uppercase)
+     * returns 'removed' or 'absent'
+     */
+    removeFromTrie(trie, word) {
+        return new Trie(TrieOp.MINUS, trie, word);
+    }
+
+    /**
+     * lookup word (converted to uppercase) in trie
+     * returns:
+     *    undefined if the word is not in the trie
+     *    -1 for a partial match (word is a prefix to an existing word)
+     *    data for the word for an exact match
+     */
+    trieLookup(trie, word) {
+        const s = word.toUpperCase().split('');
+        let p = trie;
+        let n;
+
+        while (s.length) {
+            n = s.shift();
+            p = p[n];
+            if (!p) {
+                return undefined;
+            }
+        }
+        if (p._data) {
+            return p._data;
+        }
+        return -1;
+    }
+
 }
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/keys.service.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/keys.service.spec.ts
new file mode 100644
index 0000000..5f4b349
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/keys.service.spec.ts
@@ -0,0 +1,316 @@
+/*
+ * 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 { TestBed, inject } from '@angular/core/testing';
+import {ActivatedRoute, Params} from '@angular/router';
+
+import { KeysService, KeysToken } from './keys.service';
+import { FnService } from './fn.service';
+import { LogService } from '../log.service';
+import { NavService } from '../nav/nav.service';
+
+import {of} from 'rxjs';
+import * as d3 from 'd3';
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
+
+class MockNavService {}
+
+/*
+ ONOS GUI -- Key Handler Service - Unit Tests
+ */
+describe('KeysService', () => {
+    let ar: ActivatedRoute;
+    let fs: FnService;
+    let ks: KeysService;
+    let mockWindow: Window;
+    let logServiceSpy: jasmine.SpyObj<LogService>;
+
+    const qhs: any = {};
+    let d3Elem: any;
+    let elem: any;
+    let last: any;
+
+    beforeEach(() => {
+        const logSpy = jasmine.createSpyObj('LogService', ['debug', 'warn', 'info']);
+        ar = new MockActivatedRoute({'debug': 'TestService'});
+        mockWindow = <any>{
+            innerWidth: 400,
+            innerHeight: 200,
+            navigator: {
+                userAgent: 'defaultUA'
+            },
+            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, mockWindow);
+
+        d3Elem = d3.select('body').append('p').attr('id', 'ptest');
+        elem = d3Elem.node();
+        last = {
+            view: null,
+            key: null,
+            code: null,
+            ev: null
+        };
+
+        TestBed.configureTestingModule({
+            providers: [KeysService,
+                { provide: FnService, useValue: fs},
+                { provide: LogService, useValue: logSpy },
+                { provide: ActivatedRoute, useValue: ar },
+                { provide: NavService, useClass: MockNavService},
+                { provide: 'Window', useFactory: (() => mockWindow ) }
+            ]
+        });
+        ks = TestBed.get(KeysService);
+        ks.installOn(d3Elem);
+        ks.bindQhs(qhs);
+        logServiceSpy = TestBed.get(LogService);
+    });
+
+    afterEach(() => {
+        d3.select('#ptest').remove();
+    });
+
+    it('should be created', () => {
+        expect(ks).toBeTruthy();
+    });
+
+    it('should define api functions', () => {
+        expect(fs.areFunctions(ks, [
+            'bindQhs', 'installOn', 'keyBindings', 'unbindKeys', 'dialogKeys',
+            'addSeq', 'remSeq', 'gestureNotes', 'enableKeys', 'enableGlobalKeys',
+            'checkNotGlobal', 'getKeyBindings',
+            'matchSeq', 'whatKey', 'textFieldInput', 'keyIn', 'qhlion', 'qhlionShowHide',
+            'qhlionHintEsc', 'qhlionHintT', 'setupGlobalKeys', 'quickHelp',
+            'escapeKey', 'toggleTheme', 'filterMaskedKeys', 'unexParam',
+            'setKeyBindings', 'bindDialogKeys', 'unbindDialogKeys'
+        ])).toBeTruthy();
+    });
+
+    function jsKeyDown(element, code: string, keyName: string) {
+        const ev = new KeyboardEvent('keydown',
+            { code: code, key: keyName });
+
+        // Chromium Hack
+        // if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
+        //     Object.defineProperty(ev, 'keyCode', {
+        //         get: () => { return this.keyCodeVal; }
+        //     });
+        //     Object.defineProperty(ev, 'which', {
+        //         get: () => { return this.keyCodeVal; }
+        //     });
+        // }
+
+        if (ev.code !== code.toString()) {
+            console.warn('keyCode mismatch ' + ev.code +
+                '(' + ev.which + ') -> ' + code);
+        }
+        element.dispatchEvent(ev);
+    }
+
+    // === Key binding related tests
+    it('should start with default key bindings', () => {
+        const state = ks.getKeyBindings();
+        const gk = state.globalKeys;
+        const mk = state.maskedKeys;
+        const vk = state.viewKeys;
+        const vf = state.viewFunction;
+
+        expect(gk.length).toEqual(4);
+        ['backSlash', 'slash', 'esc', 'T'].forEach((k) => {
+            expect(fs.contains(gk, k)).toBeTruthy();
+        });
+
+        expect(mk.length).toEqual(3);
+        ['backSlash', 'slash', 'T'].forEach((k) => {
+            expect(fs.contains(mk, k)).toBeTruthy();
+        });
+
+        expect(vk.length).toEqual(0);
+        expect(vf).toBeFalsy();
+    });
+
+    function bindTestKeys(withDescs?) {
+        const keys = ['A', '1', 'F5', 'equals'];
+        const kb = {};
+
+        function cb(view, key, code, ev) {
+            last.view = view;
+            last.key = key;
+            last.code = code;
+            last.ev = ev;
+        }
+
+        function bind(k) {
+            return withDescs ?
+                [(view, key, code, ev) => {cb(view, key, code, ev); }, 'desc for key ' + k] :
+                (view, key, code, ev) => {cb(view, key, code, ev); };
+        }
+
+        keys.forEach((k) => {
+            kb[k] = bind(k);
+        });
+
+        ks.keyBindings(kb);
+    }
+
+    function verifyCall(key, code) {
+        // TODO: update expectation, when view tokens are implemented
+        expect(last.view).toEqual(KeysToken.KEYEV);
+        last.view = null;
+
+        expect(last.key).toEqual(key);
+        last.key = null;
+
+        expect(last.code).toEqual(code);
+        last.code = null;
+
+        expect(last.ev).toBeTruthy();
+        last.ev = null;
+    }
+
+    function verifyNoCall() {
+        expect(last.view).toBeNull();
+        expect(last.key).toBeNull();
+        expect(last.code).toBeNull();
+        expect(last.ev).toBeNull();
+    }
+
+    function verifyTestKeys() {
+        jsKeyDown(elem, '65', 'A'); // 'A'
+        verifyCall('A', '65');
+        jsKeyDown(elem, '66', 'B'); // 'B'
+        verifyNoCall();
+
+        jsKeyDown(elem, '49', '1'); // '1'
+        verifyCall('1', '49');
+        jsKeyDown(elem, '50', '2'); // '2'
+        verifyNoCall();
+
+        jsKeyDown(elem, '116', 'F5'); // 'F5'
+        verifyCall('F5', '116');
+        jsKeyDown(elem, '117', 'F6'); // 'F6'
+        verifyNoCall();
+
+        jsKeyDown(elem, '187', '='); // 'equals'
+        verifyCall('equals', '187');
+        jsKeyDown(elem, '189', '-'); // 'dash'
+        verifyNoCall();
+
+        const vk = ks.getKeyBindings().viewKeys;
+
+        expect(vk.length).toEqual(4);
+        ['A', '1', 'F5', 'equals'].forEach((k) => {
+            expect(fs.contains(vk, k)).toBeTruthy();
+        });
+
+        expect(ks.getKeyBindings().viewFunction).toBeFalsy();
+    }
+
+    it('should allow specific key bindings', () => {
+        bindTestKeys();
+        verifyTestKeys();
+    });
+
+    it('should allow specific key bindings with descriptions', () => {
+        bindTestKeys(true);
+        verifyTestKeys();
+    });
+
+    it('should warn about masked keys', () => {
+        const k = {
+            'space': (token, key, code, ev) => cb(token, key, code, ev),
+            'T': (token, key, code, ev) => cb(token, key, code, ev)
+        };
+        let count = 0;
+
+        function cb(token, key, code, ev) {
+            count++;
+            // console.debug('count = ' + count, token, key, code);
+        }
+
+        ks.keyBindings(k);
+
+        expect(logServiceSpy.warn).toHaveBeenCalledWith('setKeyBindings()\n: Key "T" is reserved');
+
+        // the 'T' key should NOT invoke our callback
+        expect(count).toEqual(0);
+        jsKeyDown(elem, '84', 'T'); // 'T'
+        expect(count).toEqual(0);
+
+        // but the 'space' key SHOULD invoke our callback
+        jsKeyDown(elem, '32', ' '); // 'space'
+        expect(count).toEqual(1);
+    });
+
+    it('should block keys when disabled', () => {
+        let cbCount = 0;
+
+        function cb() { cbCount++; }
+
+        function pressA() { jsKeyDown(elem, '65', 'A'); }  // 65 == 'A' keycode
+
+        ks.keyBindings({ A: () => cb() });
+
+        expect(cbCount).toBe(0);
+
+        pressA();
+        expect(cbCount).toBe(1);
+
+        ks.enableKeys(false);
+        pressA();
+        expect(cbCount).toBe(1);
+
+        ks.enableKeys(true);
+        pressA();
+        expect(cbCount).toBe(2);
+    });
+
+    // === Gesture notes related tests
+    it('should start with no notes', () => {
+        expect(ks.gestureNotes()).toEqual([]);
+    });
+
+    it('should allow us to add nodes', () => {
+        const notes = [
+            ['one', 'something about one'],
+            ['two', 'description of two']
+        ];
+        ks.gestureNotes(notes);
+
+        expect(ks.gestureNotes()).toEqual(notes);
+    });
+
+    it('should ignore non-arrays', () => {
+        ks.gestureNotes({foo: 4});
+        expect(ks.gestureNotes()).toEqual([]);
+    });
+
+    // Consider adding test to ensure array contains 2-tuples of strings
+});
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/keys.service.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/keys.service.ts
new file mode 100644
index 0000000..ac68c1a
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/keys.service.ts
@@ -0,0 +1,407 @@
+/*
+ * 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 { Injectable } from '@angular/core';
+import * as d3 from 'd3';
+import { LogService } from '../log.service';
+import { FnService } from '../util/fn.service';
+import { LionService } from './lion.service';
+import { NavService } from '../nav/nav.service';
+
+export interface KeyHandler {
+    globalKeys: Object;
+    maskedKeys: Object;
+    dialogKeys: Object;
+    viewKeys: any;
+    viewFn: any;
+    viewGestures: string[][];
+}
+
+export enum KeysToken {
+    KEYEV = 'keyev'
+}
+
+/**
+ * ONOS GUI -- Keys Service Module.
+ */
+@Injectable({
+    providedIn: 'root',
+})
+export class KeysService {
+    enabled: boolean = true;
+    globalEnabled: boolean = true;
+    keyHandler: KeyHandler = <KeyHandler>{
+        globalKeys: {},
+        maskedKeys: {},
+        dialogKeys: {},
+        viewKeys: {},
+        viewFn: null,
+        viewGestures: [],
+    };
+
+    seq: any = {};
+    matching: boolean = false;
+    matched: string = '';
+    lookup: any;
+    textFieldDoesNotBlock: any = {
+        enter: 1,
+        esc: 1,
+    };
+    qhs: any; // Quick Help Service ??
+
+    constructor(
+        protected log: LogService,
+        protected fs: FnService,
+        protected ls: LionService,
+        protected ns: NavService
+    ) {
+        this.log.debug('KeyService constructed');
+    }
+
+    bindQhs(_qhs_) {
+        this.qhs = _qhs_;
+    }
+
+    installOn(elem) {
+        this.log.debug('Installing keys handler');
+        elem.on('keydown', () => { this.keyIn(); });
+        this.setupGlobalKeys();
+    }
+
+    keyBindings(x) {
+        if (x === undefined) {
+            return this.getKeyBindings();
+        } else {
+            this.setKeyBindings(x);
+        }
+    }
+
+    unbindKeys() {
+        this.keyHandler.viewKeys = {};
+        this.keyHandler.viewFn = null;
+        this.keyHandler.viewGestures = [];
+    }
+
+    dialogKeys(x) {
+        if (x === undefined) {
+            this.unbindDialogKeys();
+        } else {
+            this.bindDialogKeys(x);
+        }
+    }
+
+    addSeq(word, data) {
+        this.fs.addToTrie(this.seq, word, data);
+    }
+
+    remSeq(word) {
+        this.fs.removeFromTrie(this.seq, word);
+    }
+
+    gestureNotes(g?) {
+        if (g === undefined) {
+            return this.keyHandler.viewGestures;
+        } else {
+            this.keyHandler.viewGestures = this.fs.isA(g) || [];
+        }
+    }
+
+    enableKeys(b) {
+        this.enabled = b;
+    }
+
+    enableGlobalKeys(b) {
+        this.globalEnabled = b;
+    }
+
+    checkNotGlobal(o) {
+        const oops = [];
+        if (this.fs.isO(o)) {
+            o.forEach((val, key) => {
+                if (this.keyHandler.globalKeys[key]) {
+                    oops.push(key);
+                }
+            });
+            if (oops.length) {
+                this.log.warn('Ignoring reserved global key(s):', oops.join(','));
+                oops.forEach((key) => {
+                    delete o[key];
+                });
+            }
+        }
+    }
+
+    protected matchSeq(key) {
+        if (!this.matching && key === 'shift-shift') {
+            this.matching = true;
+            return true;
+        }
+        if (this.matching) {
+            this.matched += key;
+            this.lookup = this.fs.trieLookup(this.seq, this.matched);
+            if (this.lookup === -1) {
+                return true;
+            }
+            this.matching = false;
+            this.matched = '';
+            if (!this.lookup) {
+                return;
+            }
+            // ee.cluck(lookup);
+            return true;
+        }
+    }
+
+    protected whatKey(code: number): string {
+        switch (code) {
+            case 8: return 'delete';
+            case 9: return 'tab';
+            case 13: return 'enter';
+            case 16: return 'shift';
+            case 27: return 'esc';
+            case 32: return 'space';
+            case 37: return 'leftArrow';
+            case 38: return 'upArrow';
+            case 39: return 'rightArrow';
+            case 40: return 'downArrow';
+            case 186: return 'semicolon';
+            case 187: return 'equals';
+            case 188: return 'comma';
+            case 189: return 'dash';
+            case 190: return 'dot';
+            case 191: return 'slash';
+            case 192: return 'backQuote';
+            case 219: return 'openBracket';
+            case 220: return 'backSlash';
+            case 221: return 'closeBracket';
+            case 222: return 'quote';
+            default:
+                if ((code >= 48 && code <= 57) ||
+                    (code >= 65 && code <= 90)) {
+                    return String.fromCharCode(code);
+                } else if (code >= 112 && code <= 123) {
+                    return 'F' + (code - 111);
+                }
+                return null;
+        }
+    }
+
+    protected textFieldInput() {
+        const t = d3.event.target.tagName.toLowerCase();
+        return t === 'input' || t === 'textarea';
+    }
+
+    protected keyIn() {
+        const event = d3.event;
+        // d3.events can set the keyCode, but unit tests based on KeyboardEvent
+        // cannot set keyCode since the attribute has been deprecated
+        const code = event.keyCode ? event.keyCode : event.code;
+        let key = this.whatKey(Number.parseInt(code));
+        this.log.debug('Key detected', event, key, event.code, event.keyCode);
+        const textBlockable = !this.textFieldDoesNotBlock[key];
+        const modifiers = [];
+
+        if (event.metaKey) {
+            modifiers.push('cmd');
+        }
+        if (event.altKey) {
+            modifiers.push('alt');
+        }
+        if (event.shiftKey) {
+            modifiers.push('shift');
+        }
+
+        if (!key) {
+            return;
+        }
+
+        modifiers.push(key);
+        key = modifiers.join('-');
+
+        if (textBlockable && this.textFieldInput()) {
+            return;
+        }
+
+        const kh: KeyHandler = this.keyHandler;
+        const gk = kh.globalKeys[key];
+        const gcb = this.fs.isF(gk) || (this.fs.isA(gk) && this.fs.isF(gk[0]));
+        const dk = kh.dialogKeys[key];
+        const dcb = this.fs.isF(dk);
+        const vk = kh.viewKeys[key];
+        const kl = this.fs.isF(kh.viewKeys._keyListener);
+        const vcb = this.fs.isF(vk) || (this.fs.isA(vk) && this.fs.isF(vk[0])) || this.fs.isF(kh.viewFn);
+        const token: KeysToken = KeysToken.KEYEV; // indicate this was a key-pressed event
+
+        event.stopPropagation();
+
+        if (this.enabled) {
+            if (this.matchSeq(key)) {
+                return;
+            }
+
+            // global callback?
+            if (gcb && gcb(token, key, code, event)) {
+                // if the event was 'handled', we are done
+                return;
+            }
+            // dialog callback?
+            if (dcb) {
+                dcb(token, key, code, event);
+                // assume dialog handled the event
+                return;
+            }
+            // otherwise, let the view callback have a shot
+            if (vcb) {
+                this.log.debug('Letting view callback have a shot', vcb, token, key, code, event );
+                vcb(token, key, code, event);
+            }
+            if (kl) {
+                kl(key);
+            }
+        }
+    }
+
+    // functions to obtain localized strings deferred from the setup of the
+    //  global key data structures.
+    protected qhlion() {
+        return this.ls.bundle('core.fw.QuickHelp');
+    }
+    protected qhlionShowHide() {
+        return this.qhlion()('qh_hint_show_hide_qh');
+    }
+
+    protected qhlionHintEsc() {
+        return this.qhlion()('qh_hint_esc');
+    }
+
+    protected qhlionHintT() {
+        return this.qhlion()('qh_hint_t');
+    }
+
+    protected setupGlobalKeys() {
+        Object.assign(this.keyHandler, {
+            globalKeys: {
+                backSlash: [(view, key, code, ev) => this.quickHelp(view, key, code, ev), this.qhlionShowHide],
+                slash: [(view, key, code, ev) => this.quickHelp(view, key, code, ev), this.qhlionShowHide],
+                esc: [(view, key, code, ev) => this.escapeKey(view, key, code, ev), this.qhlionHintEsc],
+                T: [(view, key, code, ev) => this.toggleTheme(view, key, code, ev), this.qhlionHintT],
+            },
+            globalFormat: ['backSlash', 'slash', 'esc', 'T'],
+
+            // Masked keys are global key handlers that always return true.
+            // That is, the view will never see the event for that key.
+            maskedKeys: {
+                slash: 1,
+                backSlash: 1,
+                T: 1,
+            },
+        });
+    }
+
+    protected quickHelp(view, key, code, ev) {
+        if (!this.globalEnabled) {
+            return false;
+        }
+        this.qhs.showQuickHelp(this.keyHandler);
+        return true;
+    }
+
+    // returns true if we 'consumed' the ESC keypress, false otherwise
+    protected escapeKey(view, key, code, ev) {
+        return this.ns.hideNav() || this.qhs.hideQuickHelp();
+    }
+
+    protected toggleTheme(view, key, code, ev) {
+        if (!this.globalEnabled) {
+            return false;
+        }
+        // ts.toggleTheme();
+        return true;
+    }
+
+    protected filterMaskedKeys(map: any, caller: any, remove: boolean): any[] {
+        const masked = [];
+        const msgs = [];
+
+        d3.map(map).keys().forEach((key) => {
+            if (this.keyHandler.maskedKeys[key]) {
+                masked.push(key);
+                msgs.push(caller, ': Key "' + key + '" is reserved');
+            }
+        });
+
+        if (msgs.length) {
+            this.log.warn(msgs.join('\n'));
+        }
+
+        if (remove) {
+            masked.forEach((k) => {
+                delete map[k];
+            });
+        }
+        return masked;
+    }
+
+    protected unexParam(fname, x) {
+        this.log.warn(fname, ': unexpected parameter-- ', x);
+    }
+
+    protected setKeyBindings(keyArg) {
+        const fname = 'setKeyBindings()';
+        const kFunc = this.fs.isF(keyArg);
+        const kMap = this.fs.isO(keyArg);
+
+        if (kFunc) {
+            // set general key handler callback
+            this.keyHandler.viewFn = kFunc;
+        } else if (kMap) {
+            this.filterMaskedKeys(kMap, fname, true);
+            this.keyHandler.viewKeys = kMap;
+        } else {
+            this.unexParam(fname, keyArg);
+        }
+    }
+
+    getKeyBindings() {
+        const gkeys = d3.map(this.keyHandler.globalKeys).keys();
+        const masked = d3.map(this.keyHandler.maskedKeys).keys();
+        const vkeys = d3.map(this.keyHandler.viewKeys).keys();
+        const vfn = !!this.fs.isF(this.keyHandler.viewFn);
+
+        return {
+            globalKeys: gkeys,
+            maskedKeys: masked,
+            viewKeys: vkeys,
+            viewFunction: vfn,
+        };
+    }
+
+    protected bindDialogKeys(map) {
+        const fname = 'bindDialogKeys()';
+        const kMap = this.fs.isO(map);
+
+        if (kMap) {
+            this.filterMaskedKeys(map, fname, true);
+            this.keyHandler.dialogKeys = kMap;
+        } else {
+            this.unexParam(fname, map);
+        }
+    }
+
+    protected unbindDialogKeys() {
+        this.keyHandler.dialogKeys = {};
+    }
+
+}
diff --git a/web/gui2/src/main/webapp/tests/app/fw/util/lion.service.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/lion.service.spec.ts
similarity index 78%
rename from web/gui2/src/main/webapp/tests/app/fw/util/lion.service.spec.ts
rename to web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/lion.service.spec.ts
index 0b661c6..b0c252c 100644
--- a/web/gui2/src/main/webapp/tests/app/fw/util/lion.service.spec.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/lion.service.spec.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright 2017-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.
@@ -17,15 +17,15 @@
 import { TestBed, inject } from '@angular/core/testing';
 import { of } from 'rxjs';
 
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
+import { LogService } from '../log.service';
+import { ConsoleLoggerService } from '../consolelogger.service';
 import { ActivatedRoute, Params } from '@angular/router';
-import { FnService } from '../../../../app/fw/util/fn.service';
-import { GlyphService } from '../../../../app/fw/svg/glyph.service';
-import { LionService } from '../../../../app/fw/util/lion.service';
-import { UrlFnService } from '../../../../app/fw/remote/urlfn.service';
-import { WSock } from '../../../../app/fw/remote/wsock.service';
-import { WebSocketService, WsOptions } from '../../../../app/fw/remote/websocket.service';
+import { FnService } from '../util/fn.service';
+import { GlyphService } from '../svg/glyph.service';
+import { LionService } from './lion.service';
+import { UrlFnService } from '../remote/urlfn.service';
+import { WSock } from '../remote/wsock.service';
+import { WebSocketService, WsOptions } from '../remote/websocket.service';
 
 class MockActivatedRoute extends ActivatedRoute {
     constructor(params: Params) {
diff --git a/web/gui2/src/main/webapp/tests/app/fw/util/prefs.service.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/prefs.service.spec.ts
similarity index 73%
rename from web/gui2/src/main/webapp/tests/app/fw/util/prefs.service.spec.ts
rename to web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/prefs.service.spec.ts
index 0aeed99..d925ecf 100644
--- a/web/gui2/src/main/webapp/tests/app/fw/util/prefs.service.spec.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/prefs.service.spec.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.
@@ -15,15 +15,20 @@
  */
 import { TestBed, inject } from '@angular/core/testing';
 
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { PrefsService } from '../../../../app/fw/util/prefs.service';
-import { FnService } from '../../../../app/fw/util/fn.service';
-import { WebSocketService } from '../../../../app/fw/remote/websocket.service';
+import { LogService } from '../log.service';
+import { ConsoleLoggerService } from '../consolelogger.service';
+import { PrefsService } from '../util/prefs.service';
+import { FnService } from '../util/fn.service';
+import { WebSocketService } from '../remote/websocket.service';
 
 class MockFnService {}
 
-class MockWebSocketService {}
+class MockWebSocketService {
+    createWebSocket() {}
+    isConnected() { return false; }
+    unbindHandlers() {}
+    bindHandlers() {}
+}
 
 /**
  * ONOS GUI -- Util -- User Preference Service - Unit Tests
diff --git a/web/gui2/src/main/webapp/tests/app/fw/util/theme.service.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/theme.service.spec.ts
similarity index 80%
rename from web/gui2/src/main/webapp/tests/app/fw/util/theme.service.spec.ts
rename to web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/theme.service.spec.ts
index f69cc5b..16d38e3 100644
--- a/web/gui2/src/main/webapp/tests/app/fw/util/theme.service.spec.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/theme.service.spec.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright 2014-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.
@@ -15,9 +15,9 @@
  */
 import { TestBed, inject } from '@angular/core/testing';
 
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { ThemeService } from '../../../../app/fw/util/theme.service';
+import { LogService } from '../log.service';
+import { ConsoleLoggerService } from '../consolelogger.service';
+import { ThemeService } from './theme.service';
 
 /**
  * ONOS GUI -- Util -- Theme Service - Unit Tests
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/trie.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/trie.ts
new file mode 100644
index 0000000..5e08061
--- /dev/null
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/util/trie.ts
@@ -0,0 +1,125 @@
+/*
+ * 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.
+ */
+
+export interface TrieC {
+    p: any;
+    s: string[];
+}
+
+export interface TrieT {
+    k: any;
+    p: any;
+    q: any;
+}
+
+export enum TrieRemoved {
+    REMOVED = 'removed',
+    ABSENT = 'absent'
+}
+
+export enum TrieInsert {
+    ADDED = 'added',
+    UPDATED = 'updated'
+}
+
+/**
+ * Combine TrieRemoved and TrieInsert in to a union type
+ */
+export type TrieActions = TrieRemoved | TrieInsert;
+
+export enum TrieOp {
+    PLUS = '+',
+    MINUS = '-'
+}
+
+
+export class Trie {
+    p: any;
+    w: string;
+    s: string[];
+    c: TrieC;
+    t: TrieT[];
+    x: number;
+    f1: (TrieC) => TrieC;
+    f2: () => TrieActions;
+    data: any;
+
+
+    constructor(
+        op: TrieOp,
+        trie: any,
+        word: string,
+        data?: any
+    ) {
+        this.p = trie;
+        this.w = word.toUpperCase();
+        this.s = this.w.split('');
+        this.c = { p: this.p, s: this.s },
+        this.t = [];
+        this.x = 0;
+        this.f1 = op === TrieOp.PLUS ? this.add : this.probe;
+        this.f2 = op === TrieOp.PLUS ? this.insert : this.remove;
+        this.data = data;
+        while (this.c.s.length) {
+            this.c = this.f1(this.c);
+        }
+    }
+
+    add(cAdded: TrieC): TrieC {
+        const q = cAdded.s.shift();
+        let np = cAdded.p[q];
+
+        if (!np) {
+            cAdded.p[q] = {};
+            np = cAdded.p[q];
+            this.x = 1;
+        }
+        return { p: np, s: cAdded.s };
+    }
+
+    probe(cProbed: TrieC): TrieC {
+        const q = cProbed.s.shift();
+        const k: number = Object.keys(cProbed.p).length;
+        const np = cProbed.p[q];
+
+        this.t.push({ q: q, k: k, p: cProbed.p });
+        if (!np) {
+            this.t = [];
+            return { p: [], s: [] };
+        }
+        return { p: np, s: cProbed.s };
+    }
+
+    insert(): TrieInsert {
+        this.c.p._data = this.data;
+        return this.x ? TrieInsert.ADDED : TrieInsert.UPDATED;
+    }
+
+    remove(): TrieRemoved {
+        if (this.t.length) {
+            this.t = this.t.reverse();
+            while (this.t.length) {
+                const d = this.t.shift();
+                delete d.p[d.q];
+                if (d.k > 1) {
+                    this.t = [];
+                }
+            }
+            return TrieRemoved.REMOVED;
+        }
+        return TrieRemoved.ABSENT;
+    }
+}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/detailspanel.base.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/detailspanel.base.ts
index 11dc8c9..03c681b 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/detailspanel.base.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/detailspanel.base.ts
@@ -55,7 +55,7 @@
         protected wss: WebSocketService,
         protected tag: string,
     ) {
-        super(fs, ls, log, wss, {});
+        super(fs, ls, log);
         this.root = tag + 's';
         this.req = tag + 'DetailsRequest';
         this.resp = tag + 'DetailsResponse';
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/panel.base.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/panel.base.ts
index 90cdfd5..0377c47 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/panel.base.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/panel.base.ts
@@ -16,41 +16,6 @@
 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';
-}
 
 
 /**
@@ -60,14 +25,7 @@
     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;
 }
 
 /**
@@ -77,36 +35,22 @@
  */
 export abstract class PanelBaseImpl implements PanelBase {
 
-    protected on: boolean;
-    protected el: any;
+    on: boolean;
 
     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 {
@@ -118,45 +62,10 @@
         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
diff --git a/web/gui2/src/main/webapp/tests/app/detectbrowser.directive.spec.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/tableresize.directive.spec.ts
similarity index 71%
copy from web/gui2/src/main/webapp/tests/app/detectbrowser.directive.spec.ts
copy to web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/tableresize.directive.spec.ts
index 37f4a8e..b1e87e6 100644
--- a/web/gui2/src/main/webapp/tests/app/detectbrowser.directive.spec.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/tableresize.directive.spec.ts
@@ -14,14 +14,15 @@
  * limitations under the License.
  */
 import { TestBed, inject } from '@angular/core/testing';
-
-import { LogService } from '../../app/log.service';
-import { ConsoleLoggerService } from '../../app/consolelogger.service';
-import { DetectBrowserDirective } from '../../app/detectbrowser.directive';
 import { ActivatedRoute, Params } from '@angular/router';
-import { FnService } from '../../app/fw/util/fn.service';
-import { OnosService } from '../../app/onos.service';
 import { of } from 'rxjs';
+import { TableResizeDirective } from './tableresize.directive';
+import { LogService } from '..//log.service';
+import { ConsoleLoggerService } from '../consolelogger.service';
+import { MastService } from '../mast/mast.service';
+import { FnService } from '../util/fn.service';
+
+class MockMastService {}
 
 class MockFnService extends FnService {
     constructor(ar: ActivatedRoute, log: LogService, w: Window) {
@@ -29,8 +30,6 @@
     }
 }
 
-class MockOnosService {}
-
 class MockActivatedRoute extends ActivatedRoute {
     constructor(params: Params) {
         super();
@@ -39,12 +38,12 @@
 }
 
 /**
- * ONOS GUI -- Detect Browser Directive - Unit Tests
+ * ONOS GUI -- Widget -- Table Resize Directive - Unit Tests
  */
-describe('DetectBrowserDirective', () => {
+describe('TableResizeDirective', () => {
     let log: LogService;
-    let ar: ActivatedRoute;
     let mockWindow: Window;
+    let ar: ActivatedRoute;
 
     beforeEach(() => {
         log = new ConsoleLoggerService();
@@ -55,14 +54,12 @@
                 vendor: 'Google Inc.'
             }
         };
-
         TestBed.configureTestingModule({
-            providers: [ DetectBrowserDirective,
+            providers: [ TableResizeDirective,
                 { provide: FnService, useValue: new MockFnService(ar, log, mockWindow) },
                 { provide: LogService, useValue: log },
-                { provide: OnosService, useClass: MockOnosService },
-                { provide: Document, useValue: document },
-                { provide: 'Window', useFactory: (() => mockWindow ) }
+                { provide: MastService, useClass: MockMastService },
+                { provide: 'Window', useFactory: (() => mockWindow ) },
             ]
         });
     });
@@ -71,7 +68,7 @@
         log = null;
     });
 
-    it('should create an instance', inject([DetectBrowserDirective], (directive: DetectBrowserDirective) => {
+    it('should create an instance', inject([TableResizeDirective], (directive: TableResizeDirective) => {
         expect(directive).toBeTruthy();
     }));
 });
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/tableresize.directive.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/tableresize.directive.ts
index 0678583..5d3a9eb 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/tableresize.directive.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/tableresize.directive.ts
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { AfterContentChecked, Directive, ElementRef, Inject } from '@angular/core';
+import { AfterContentChecked, Directive, Inject } from '@angular/core';
 import { FnService } from '../util/fn.service';
 import { LogService } from '../log.service';
 import { MastService } from '../mast/mast.service';
@@ -34,7 +34,6 @@
     constructor(protected fs: FnService,
         protected log: LogService,
         protected mast: MastService,
-        protected el: ElementRef,
         @Inject('Window') private w: any) {
 
         log.info('TableResizeDirective constructed');
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/public_api.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/public_api.ts
index 51cf201..5f162d5 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/public_api.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/public_api.ts
@@ -36,10 +36,14 @@
 export * from './lib/svg/svgutil.service';
 export * from './lib/svg/glyphdata.service';
 export * from './lib/svg/glyph.service';
+export * from './lib/svg/zoom.service';
+
 export * from './lib/util/prefs.service';
 export * from './lib/util/fn.service';
 export * from './lib/util/lion.service';
 export * from './lib/util/theme.service';
+export * from './lib/util/keys.service';
+export * from './lib/util/trie';
 
 export * from './lib/mast/mast/mast.component';
 export * from './lib/layer/veil/veil.component';
diff --git a/web/gui2-fw-lib/src/app/app.module.ts b/web/gui2-fw-lib/src/app/app.module.ts
index dc92383..d2d4a5d 100644
--- a/web/gui2-fw-lib/src/app/app.module.ts
+++ b/web/gui2-fw-lib/src/app/app.module.ts
@@ -16,13 +16,13 @@
 
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes }  from '@angular/router';
+import { RouterModule, Routes } from '@angular/router';
 import { AppComponent } from './app.component';
 import { Gui2FwLibModule, ConsoleLoggerService, LogService } from 'gui2-fw-lib';
 
 const appRoutes: Routes = [
   { path: '**', component: AppComponent }
-]
+];
 
 @NgModule({
   declarations: [
diff --git a/web/gui2/README.md b/web/gui2/README.md
index 3064b76..c3cbed3 100644
--- a/web/gui2/README.md
+++ b/web/gui2/README.md
@@ -5,7 +5,7 @@
 as an alternative to the 1.0.0 GUI which was based 
 off __[AngularJS 1.3.5](https://angularjs.org/)__
 
-Building, testing and running lint are all handled by BUCK. See web/gui2/BUCK file.
+Building, testing and running lint are all handled by Bazel. See web/gui2/BUILD file.
 
 To use this new GUI you simply have to start the GUI in a running ONOS at the __onos>__ cli:
 ```
@@ -16,52 +16,125 @@
 As usual with ONOS if you want to run it in a different language set the __ONOS_LOCALE__ environment variable
 to the locale you want before starting onos. e.g.
 ```
-ONOS_LOCALE=fr_FR onos-buck run onos-local
+ONOS_LOCALE=fr_FR SHLVL=1 bazel run onos-local
 ```
 
 # Development
 There are 2 ways to go about development - 
-1. rebuild the code and rerun through BUCK (much like can be done with any ordinary ONOS app) 
- (this is not recommended though since in this mode the browser side code is built in '--prod' mode
+1. rebuild the code and rerun through Bazel (much like can be done with any ordinary ONOS app) 
+ (this is not optimal though since in this mode the browser side code is built in '--prod' mode
  and all debug symbols are stripped and debug statements are not logged and the code is uglified and minimized.
- It is useful for testing "prod" mode works though) OR
+ It is useful for testing "prod" mode works though and saves having to set up direct development) OR
 2. use Angular 6 CLI (__ng__ command) to rebuild on the fly (must faster for development) 
 
-For 1) if you change the code you can redeploy the application without restarting ONOS with (requires you to be in ~/onos directory):
+For 1) (this needs to be updated for Bazel commands) if you change the code you can redeploy the application without restarting ONOS with (requires you to be in ~/onos directory):
 ```
 onos-buck build //web/gui2:onos-web-gui2-oar --show-output|grep /app.oar | cut -d\  -f2 | xargs onos-app localhost reinstall!
 ```
 
 For 2) it's well worth becoming familiar with Angular CLI.
 The project is created with [Angular CLI](https://github.com/angular/angular-cli) v6 to simplify development of the browser side code.
-
+It is complicated to set up, but is worth the effort if you have more than a day's worth of development to do.
 This allows you to develop the Angular 6 TypeScript code independent of ONOS in a separate container. 
-Since WebSockets have been implemented (Jun 18) there is a requirement to run ONOS in the background.
+Since WebSockets have been implemented - there is a requirement to run ONOS in the background.
 
 There is no need to install node, npm or ng again on your system, and indeed if they are already installed, it's best
-to use the versions of these that's used by BUCK. To do this add to the __start__ of your PATH environment variable. 
+to use the versions of these that's used by Bazel. To do this add the following 2 entries to the __start__ of your PATH environment variable. 
 ```
-~/onos/buck-out/gen/web/gui2/node-bin-v8.11.1/node-binaries/bin
+~/.cache/bazel/_bazel_scondon/8beba376f58d295cf3282443fe02c21a/external/nodejs/bin/nodejs/bin
+```
+(where ~/.cache/bazel/_bazel_scondon/8beba376f58d295cf3282443fe02c21a should be replaced by an equivalent folder on your system)
+```text
+~/onos/web/gui2-fw-lib/node_modules/@angular/cli/bin/
+```
 
+The first time you run this you will have to go to the framework folder and run "npm install"
+```text
+cd ~/onos/web/gui2-fw-lib && \
+npm install
 ```
-On Linux:
-```
-export PATH=~/onos/buck-out/gen/web/gui2/node-bin-v8.11.1/node-binaries/bin:$PATH
-``` 
 
-After this you should be able to run 'ng -v' and see:
+This will install all the vendor Javascript implementations that are listed in package.json
+ (including 'ng' - the Angular CLI command) in to ~/onos/web/gui2-fw-lib/node_modules
+
+After this you should be able to cd in to ~/onos/web/gui2-fw-lib and run 'ng -v' and see:
 ```
 Angular CLI: 6.0.0
 Node: 8.11.1
 OS: linux x64
 ```
 
-To use Angular CLI for development on your system, you need to: 
+## GUI FW Lib
+The GUI2 __framework__ is in __~/onos/web/gui2-fw-lib__ and the GUI __application__ is in __~/onos/web/gui2__ (and depends on the framework).
+
+The GUI2 framework is a library inside its own mini application (unrelated to the main GUI application) - every thing of importance 
+is in projects/gui2-fw-lib. The own application is just a wrapper around the framework
+library - it has to be there for Angular CLI to work. 
+
+If you make any changes here or are using it for the first time it will need to be built
+```text
+cd ~/onos/web/gui2-fw-lib && \
+ng build gui2-fw-lib && \
+pushd dist/gui2-fw-lib && \
+npm pack && \
+popd
+```
+
+To test and lint it use
+```text
+ng lint gui2-fw-lib && \
+ng test gui2-fw-lib
+```
+
+This packages the Framework up in to __onos/web/gui2-fw-lib/dist/gui2-fw-lib/gui2-fw-lib-0.14.0.tgz__
+
+## GUI2 Application
+The application contains the ONOS index.html and all of the tabular views and the topology view.
+It references the gui2-fw-lib, as just another dependency. 
+
+To use this application in Angular CLI for development on your system, you need to: 
 1. Change directory in to onos/web/gui2 - this is where you will run the `ng` command from.
 2. Run `npm install` once from this folder to add dependencies
 3. Then run 'ng -v' from onos/web/gui2 and an additional version should be shown __Angular: 6.0.0__
+4. Temporarily make a change to disable authentication in UIWebSocket.java
+5. Temporarily make a change to disable external routes in onos-routing.module.ts
+6. Create symbolic links for some CSS files
+
+### Disable authentication and external routes
+Before the server can be run a couple of small adjustments need to be temporarily made
+1. The file __~/onos/web/gui/src/main/java/org/onosproject/ui/impl/UiWebSocket.java__ 
+needs to be adjusted to remove authentication
+2. The file __~/onos/web/gui2/src/main/webapp/app/onos-routing.module.ts__ needs 
+to be adjusted to remove references to routes in external applications 
+
+These changes are given in Appendix A at the end of this document - these changes should not be 
+checked in though - as they are not required (and will break) the GUI2 embedded in ONOS.
+
+### Create symbolic links for CSS files
+Also some files need to be symbolically linked - these should no be checked in
+```text
+cd ~/onos/web/gui2/src/main/webapp/app && \
+mkdir -p fw/widget && mkdir -p fw/layer && \
+cd fw/layer && ln -s ~/onos/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/layer/loading.service.css && \
+cd ../widget && \
+ln -s ~/onos/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/panel.css && \
+ln -s ~/onos/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/panel-theme.css && \
+ln -s ~/onos/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/table.css && \
+ln -s ~/onos/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/table.theme.css
+```
+
+After this it will be possible to build/test/lint/run the application inside the Angular CLI without errors.
+```text
+ng build --prod && \
+ng lint && \
+ng test --watch=false
+```
 
 ## Development server
+Finally the application can be run, and will be available at http://localhost:4200
+```text
+ng serve --aot
+``` 
 
 Run `ng serve --aot` for a dev server (because we are using ES6, we [must use AOT](https://github.com/angular/angular-cli/wiki/build)). 
 Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
@@ -75,24 +148,29 @@
 source the image, and this path is not available in this 'ng serve' mode. The icons work fine in the
 mode where it's run inside ONOS. 
 
-## Code scaffolding
+### Navigating
+In this development mode navigation is not available, and to to jump to other view, 
+replace the 'device' at the end of the URL with the route you want to follow
+e.g. 'app' for the Applications view or 'topo' for the Topology view
 
+## Code scaffolding
+Change directory in to '~onos/web/gui2/src/main/webapp/app/view'
 Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
 
 ## Build
-The build is handled through the web/gui2/BUCK file. This downloads Node, NPM and Angular CLI
+The build is handled through the web/gui2/BUILD file. This downloads Node, NPM and Angular CLI
 It runs ```ng build --prod --extract-css``` and copies everything over in to WEB-INF/classes/dist
 
 To run it manually in Angular CLI run `ng build` (and add on --prod --extract-css --watch as necessary to alter its behaviour)
 
 ## Running unit tests
-This is automatically done when using "onos-buck test" - see the web/gui2/BUCK file for more details.
+This is automatically done when using "bazel test " - see the web/gui2/BUILD file for more details.
 
 To run it manually in Angular CLI run `ng test --watch` to execute the unit tests via [Karma](https://karma-runner.github.io).
 Running it directly like this will test with both Firefox and Chrome. To use only one use the __--browsers__ argument
 
-## Running checkstyle
-This is automatically done when using "onos-buck test" - see the web/gui2/BUCK file for more details.
+## Running checkstyle (lint)
+This is automatically done when using "bazel test" - see the web/gui2/BUILD file for more details.
 
 To run it manually in Angular CLI run `ng lint` to run codelyzer on your code, according to the rules in __tslint.json__
 
@@ -101,10 +179,56 @@
 To run it manually in Angular CLI run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
 
 ## Generating documentation
-This is automatically done when using "onos-buck onos build" - see the web/gui2/BUCK file for more details.
+This is automatically done when using "ob" - see the web/gui2/BUILD file for more details.
 
 To run it manually in Angular CLI run `npm run compodoc` to generate documentation via [Compodoc](https://github.com/compodoc/compodoc)
 
 ## Further help
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
+
+
+# Appendix A - changes needed to run GUI2 application locally
+
+```text
+diff --git a/web/gui/src/main/java/org/onosproject/ui/impl/UiWebSocket.java b/web/gui/src/main/java/org/onosproject/ui/impl/UiWebSocket.java
+index e53a00756b..63e538a4db 100644
+--- a/web/gui/src/main/java/org/onosproject/ui/impl/UiWebSocket.java
++++ b/web/gui/src/main/java/org/onosproject/ui/impl/UiWebSocket.java
+@@ -251,9 +251,7 @@ public class UiWebSocket
+             ObjectNode message = (ObjectNode) mapper.reader().readTree(data);
+             String type = message.path(EVENT).asText(UNKNOWN);
+ 
+-            if (sessionToken == null) {
+-                authenticate(type, message);
+-            } else {
++
+                 UiMessageHandler handler = handlers.get(type);
+                 if (handler != null) {
+                     log.debug("RX message: {}", message);
+@@ -261,7 +259,6 @@ public class UiWebSocket
+                 } else {
+                     log.warn("No GUI message handler for type {}", type);
+                 }
+-            }
+ 
+         } catch (Exception e) {
+             log.warn("Unable to parse GUI message {} due to {}", data, e);
+diff --git a/web/gui2/src/main/webapp/app/onos-routing.module.ts b/web/gui2/src/main/webapp/app/onos-routing.module.ts
+index 60ec9d7da6..3abb62376a 100644
+--- a/web/gui2/src/main/webapp/app/onos-routing.module.ts
++++ b/web/gui2/src/main/webapp/app/onos-routing.module.ts
+@@ -83,10 +83,10 @@ const onosRoutes: Routes = [
+         loadChildren: 'app/view/topology/topology.module#TopologyModule'
+     },
+ /*  Comment out below section for running locally with 'ng serve' when developing */
+-    {
++/*    {
+         path: 'alarmTable',
+         loadChildren: 'fm-gui2-lib#FmGui2LibModule'
+-    },
++    },*/
+     {
+         path: '',
+         redirectTo: 'device', // Default to devices view - change to topo in future
+```  
\ No newline at end of file
diff --git a/web/gui2/package-lock.json b/web/gui2/package-lock.json
index da2444c..0fec8ad 100644
--- a/web/gui2/package-lock.json
+++ b/web/gui2/package-lock.json
@@ -70,7 +70,7 @@
         "webpack-dev-server": "3.1.9",
         "webpack-merge": "4.1.4",
         "webpack-sources": "1.3.0",
-        "webpack-subresource-integrity": "1.1.0-rc.6"
+        "webpack-subresource-integrity": "1.1.0-rc.7"
       }
     },
     "@angular-devkit/build-optimizer": {
@@ -662,18 +662,18 @@
       }
     },
     "@types/jasmine": {
-      "version": "2.8.8",
-      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.8.8.tgz",
-      "integrity": "sha512-OJSUxLaxXsjjhob2DBzqzgrkLmukM3+JMpRp0r0E4HTdT1nwDCWhaswjYxazPij6uOdzHCJfNbDjmQ1/rnNbCg==",
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.8.9.tgz",
+      "integrity": "sha512-8dPZwjosElZOGGYw1nwTvOEMof4gjwAWNFS93nBI091BoEfd5drnHOLRMiRF/LOPuMTn5LgEdv0bTUO8QFVuHQ==",
       "dev": true
     },
     "@types/jasminewd2": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@types/jasminewd2/-/jasminewd2-2.0.4.tgz",
-      "integrity": "sha512-G83fHoholqR7pmsY7ojHJqMAl4zD6ylKNaKCx7zH+GisCBQpnI5a7aUTFWVzv2wppIuWd+mJxyRqTASPfqcQ2w==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@types/jasminewd2/-/jasminewd2-2.0.5.tgz",
+      "integrity": "sha512-1awkm/O4pQCR9hI2F80HmIOda/L+ogkSL8Arj1k00eue5VLY5ooewhSOyF/cUJE0S+/34uD5EYY3zmd6fu2OCA==",
       "dev": true,
       "requires": {
-        "@types/jasmine": "2.8.8"
+        "@types/jasmine": "2.8.9"
       }
     },
     "@types/node": {
@@ -1337,7 +1337,7 @@
       "dev": true,
       "requires": {
         "browserslist": "3.2.8",
-        "caniuse-lite": "1.0.30000888",
+        "caniuse-lite": "1.0.30000890",
         "normalize-range": "0.1.2",
         "num2fraction": "1.2.2",
         "postcss": "6.0.23",
@@ -1827,8 +1827,8 @@
       "integrity": "sha512-WHVocJYavUwVgVViC0ORikPHQquXwVh939TaelZ4WDqpWgTX/FsGhl/+P4qBUAGcRvtOgDgC+xftNWWp2RUTAQ==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "1.0.30000888",
-        "electron-to-chromium": "1.3.73"
+        "caniuse-lite": "1.0.30000890",
+        "electron-to-chromium": "1.3.75"
       }
     },
     "buffer": {
@@ -1997,9 +1997,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30000888",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000888.tgz",
-      "integrity": "sha512-vftg+5p/lPsQGpnhSo/yBuYL36ai/cyjLvU3dOPJY1kkKrekLWIy8SLm+wzjX0hpCUdFTasC4/ZT7uqw4rKOnQ==",
+      "version": "1.0.30000890",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000890.tgz",
+      "integrity": "sha512-4NI3s4Y6ROm+SgZN5sLUG4k7nVWQnedis3c/RWkynV5G6cHSY7+a8fwFyn2yoBDE3E6VswhTNNwR3PvzGqlTkg==",
       "dev": true
     },
     "caseless": {
@@ -2233,9 +2233,9 @@
       "dev": true
     },
     "codelyzer": {
-      "version": "4.4.4",
-      "resolved": "https://registry.npmjs.org/codelyzer/-/codelyzer-4.4.4.tgz",
-      "integrity": "sha512-JgFMudx0n50IuE/ydAfnkksCwQkWSVWgYvhDPHZgDUbmsiYC22VuEXKu5l8Hhx9UJsLgjWDLjTAFGj2WaW5DUA==",
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/codelyzer/-/codelyzer-4.5.0.tgz",
+      "integrity": "sha512-oO6vCkjqsVrEsmh58oNlnJkRXuA30hF8cdNAQV9DytEalDwyOFRvHMnlKFzmOStNerOmPGZU9GAHnBo4tGvtiQ==",
       "dev": true,
       "requires": {
         "app-root-path": "2.1.0",
@@ -2415,7 +2415,7 @@
         },
         "ms": {
           "version": "0.7.1",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
+          "resolved": "http://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
           "integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=",
           "dev": true
         },
@@ -2586,7 +2586,7 @@
       "requires": {
         "cipher-base": "1.0.4",
         "inherits": "2.0.3",
-        "md5.js": "1.3.4",
+        "md5.js": "1.3.5",
         "ripemd160": "2.0.2",
         "sha.js": "2.4.11"
       }
@@ -3378,9 +3378,9 @@
       "dev": true
     },
     "electron-to-chromium": {
-      "version": "1.3.73",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.73.tgz",
-      "integrity": "sha512-6PIg7v9zRoVGh6EheRF8h6Plti+3Yo/qtHobS4/Htyt53DNHmKKGFqSae1AIk0k1S4gCQvt7I2WgpbuZNcDY+g==",
+      "version": "1.3.75",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.75.tgz",
+      "integrity": "sha512-nLo03Qpw++8R6BxDZL/B1c8SQvUe/htdgc5LWYHe5YotV2jVvRUMP5AlOmxOsyeOzgMiXrNln2mC05Ixz6vuUQ==",
       "dev": true
     },
     "elliptic": {
@@ -3454,7 +3454,7 @@
         },
         "ms": {
           "version": "0.7.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
+          "resolved": "http://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
           "integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=",
           "dev": true
         }
@@ -3491,7 +3491,7 @@
         },
         "ms": {
           "version": "0.7.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
+          "resolved": "http://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
           "integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=",
           "dev": true
         }
@@ -3738,7 +3738,7 @@
       "integrity": "sha512-/f2Go4TognH/KvCISP7OUsHn85hT9nUkxxA9BEWxFn+Oj9o8ZNLm/40hdlgSLyuOimsrTKLUMEorQexp/aPQeA==",
       "dev": true,
       "requires": {
-        "md5.js": "1.3.4",
+        "md5.js": "1.3.5",
         "safe-buffer": "5.1.2"
       }
     },
@@ -4109,9 +4109,9 @@
       "dev": true
     },
     "fast-glob": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.2.tgz",
-      "integrity": "sha512-TR6zxCKftDQnUAPvkrCWdBgDq/gbqx8A3ApnBrR5rMvpp6+KMJI0Igw7fkWPgeVK0uhRXTXdvO3O+YP0CaUX2g==",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-2.2.3.tgz",
+      "integrity": "sha512-NiX+JXjnx43RzvVFwRWfPKo4U+1BrK5pJPsHQdKMlLoFHrrGktXglQhHliSihWAq+m1z6fHk3uwGHrtRbS9vLA==",
       "dev": true,
       "requires": {
         "@mrmlnc/readdir-enhanced": "2.2.1",
@@ -4151,7 +4151,7 @@
     },
     "file-loader": {
       "version": "1.1.11",
-      "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-1.1.11.tgz",
+      "resolved": "http://registry.npmjs.org/file-loader/-/file-loader-1.1.11.tgz",
       "integrity": "sha512-TGR4HU7HUsGg6GCOPJnFk06RhWgEWFLAGWiT6rcD+GRC2keU3s9RGJ+b3Z6/U73jwwNb2gKLJ7YCrp+jvU4ALg==",
       "dev": true,
       "requires": {
@@ -4251,7 +4251,7 @@
     },
     "fm-gui2-lib": {
       "version": "file:../../apps/faultmanagement/fm-gui2-lib/dist/fm-gui2-lib/fm-gui2-lib-1.15.0.tgz",
-      "integrity": "sha512-5qRtSAZDtFeafTTaJ9UHwyP+E7Sj6nx5RrAORCzt1DswqI4YFZqW1nSLa9co0hWqi9lem5sKspp+BH787TiXwQ==",
+      "integrity": "sha512-x2tby0vrDdC087L3bY9lB6eQtI90td1XmDFa45+BBHmfEiyFsNEtJcDon4jIXG42SJQRpp4xZUJpJ9jbiCqEfg==",
       "requires": {
         "tslib": "1.9.3"
       }
@@ -4981,7 +4981,7 @@
     },
     "get-stream": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
+      "resolved": "http://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz",
       "integrity": "sha1-jpQ9E1jcN1VQVOy+LtsFqhdO3hQ=",
       "dev": true
     },
@@ -5117,7 +5117,7 @@
     },
     "gui2-fw-lib": {
       "version": "file:../gui2-fw-lib/dist/gui2-fw-lib/gui2-fw-lib-0.14.0.tgz",
-      "integrity": "sha512-8TJ45BxzQw8UEx9/zmwuz9prZmItcpVSbyF5LifAO8iPLQa34VLyTWI39YWWV7Pd3jc+ez270WTEfCzvafvz8w==",
+      "integrity": "sha512-b3u3DZ6GTtp5sqPpDk7XcGsjc1GCpQhDQxaDxkF65GAtlivYWPUS8jSiu2oIVWsYoOnhMW5ck/A33RraVsfhKQ==",
       "requires": {
         "tslib": "1.9.3"
       }
@@ -7254,13 +7254,14 @@
       "dev": true
     },
     "md5.js": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.4.tgz",
-      "integrity": "sha1-6b296UogpawYsENA/Fdk1bCdkB0=",
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
+      "integrity": "sha512-xitP+WxNPcTTOgnTJcrhM0xvdPepipPSf3I8EIpGKeFLjt3PlJLIDG3u8EX53ZIubkb+5U2+3rELYpEhHhzdkg==",
       "dev": true,
       "requires": {
         "hash-base": "3.0.4",
-        "inherits": "2.0.3"
+        "inherits": "2.0.3",
+        "safe-buffer": "5.1.2"
       }
     },
     "media-typer": {
@@ -8630,7 +8631,7 @@
       "integrity": "sha512-pw4uwwiy5lHZjIguxNpkEwJJa7hVz+bJsvaTI+IbXlfn2qXwzbF8eghW/RmrZwE2sGx82I8etb8lVjQ+JrjejA==",
       "dev": true,
       "requires": {
-        "@types/node": "6.0.117",
+        "@types/node": "6.0.118",
         "@types/q": "0.0.32",
         "@types/selenium-webdriver": "2.53.43",
         "blocking-proxy": "1.0.1",
@@ -8648,9 +8649,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "6.0.117",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.117.tgz",
-          "integrity": "sha512-sihk0SnN8PpiS5ihu5xJQ5ddnURNq4P+XPmW+nORlKkHy21CoZO/IVHK/Wq/l3G8fFW06Fkltgnqx229uPlnRg==",
+          "version": "6.0.118",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.118.tgz",
+          "integrity": "sha512-N33cKXGSqhOYaPiT4xUGsYlPPDwFtQM/6QxJxuMXA/7BcySW+lkn2yigWP7vfs4daiL/7NJNU6DMCqg5N4B+xQ==",
           "dev": true
         },
         "adm-zip": {
@@ -9843,7 +9844,7 @@
         },
         "ms": {
           "version": "0.7.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
+          "resolved": "http://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
           "integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=",
           "dev": true
         },
@@ -9876,7 +9877,7 @@
         },
         "ms": {
           "version": "0.7.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
+          "resolved": "http://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
           "integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=",
           "dev": true
         }
@@ -9912,7 +9913,7 @@
         },
         "ms": {
           "version": "0.7.2",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
+          "resolved": "http://registry.npmjs.org/ms/-/ms-0.7.2.tgz",
           "integrity": "sha1-riXPJRKziFodldfwN4aNhDESR2U=",
           "dev": true
         }
@@ -9953,7 +9954,7 @@
         },
         "ms": {
           "version": "0.7.1",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
+          "resolved": "http://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
           "integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=",
           "dev": true
         }
@@ -10044,9 +10045,9 @@
       "dev": true
     },
     "spdx-correct": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.1.tgz",
-      "integrity": "sha512-hxSPZbRZvSDuOvADntOElzJpenIR7wXJkuoUcUtS0erbgt2fgeaoPIYretfKpslMhfFDY4k0MZ2F5CUzhBsSvQ==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.2.tgz",
+      "integrity": "sha512-q9hedtzyXHr5S0A1vEPoK/7l8NpfkFYTq6iCY+Pno2ZbdZR6WexZFtqeVGkGxW3TEJMN914Z55EnAGMmenlIQQ==",
       "dev": true,
       "requires": {
         "spdx-expression-parse": "3.0.0",
@@ -10670,7 +10671,7 @@
           "requires": {
             "array-union": "1.0.2",
             "dir-glob": "2.0.0",
-            "fast-glob": "2.2.2",
+            "fast-glob": "2.2.3",
             "glob": "7.1.3",
             "ignore": "3.3.10",
             "pify": "3.0.0",
@@ -11186,7 +11187,7 @@
       "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
       "dev": true,
       "requires": {
-        "spdx-correct": "3.0.1",
+        "spdx-correct": "3.0.2",
         "spdx-expression-parse": "3.0.0"
       }
     },
@@ -11686,9 +11687,9 @@
       }
     },
     "webpack-subresource-integrity": {
-      "version": "1.1.0-rc.6",
-      "resolved": "https://registry.npmjs.org/webpack-subresource-integrity/-/webpack-subresource-integrity-1.1.0-rc.6.tgz",
-      "integrity": "sha512-Az7y8xTniNhaA0620AV1KPwWOqawurVVDzQSpPAeR5RwNbL91GoBSJAAo9cfd+GiFHwsS5bbHepBw1e6Hzxy4w==",
+      "version": "1.1.0-rc.7",
+      "resolved": "https://registry.npmjs.org/webpack-subresource-integrity/-/webpack-subresource-integrity-1.1.0-rc.7.tgz",
+      "integrity": "sha512-oWhoXGeA+F6lNJajh6pIBTTTa1qKJ4bpN3nRUKBrs3wJ6wId5HeKUxB8JUWY2gq6NsUFZ5Xi79HI2QEot6ZuhA==",
       "dev": true,
       "requires": {
         "webpack-core": "0.6.9"
diff --git a/web/gui2/src/main/tslint.json b/web/gui2/src/main/tslint.json
index c040afa..c07f1d2 100644
--- a/web/gui2/src/main/tslint.json
+++ b/web/gui2/src/main/tslint.json
@@ -124,7 +124,7 @@
     ],
     "component-selector": [
       true,
-      "element",
+      ["element", "attribute"],
       "onos",
       "kebab-case"
     ],
diff --git a/web/gui2/src/main/webapp/app/nav/nav.component.css b/web/gui2/src/main/webapp/app/nav/nav.component.css
index d7471c4..2386042 100644
--- a/web/gui2/src/main/webapp/app/nav/nav.component.css
+++ b/web/gui2/src/main/webapp/app/nav/nav.component.css
@@ -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.
diff --git a/web/gui2/src/main/webapp/app/nav/nav.component.spec.ts b/web/gui2/src/main/webapp/app/nav/nav.component.spec.ts
index acc400f..7b3fbfa 100644
--- a/web/gui2/src/main/webapp/app/nav/nav.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/nav/nav.component.spec.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.
diff --git a/web/gui2/src/main/webapp/app/nav/nav.component.ts b/web/gui2/src/main/webapp/app/nav/nav.component.ts
index 058f514..218285b 100644
--- a/web/gui2/src/main/webapp/app/nav/nav.component.ts
+++ b/web/gui2/src/main/webapp/app/nav/nav.component.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.
diff --git a/web/gui2/src/main/webapp/app/nav/nav.theme.css b/web/gui2/src/main/webapp/app/nav/nav.theme.css
index 1a308ac..ff2e50b 100644
--- a/web/gui2/src/main/webapp/app/nav/nav.theme.css
+++ b/web/gui2/src/main/webapp/app/nav/nav.theme.css
@@ -1,5 +1,5 @@
 /*
- * Copyright 2016-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.
diff --git a/web/gui2/src/main/webapp/app/onos-routing.module.ts b/web/gui2/src/main/webapp/app/onos-routing.module.ts
index 344e6d9..60ec9d7 100644
--- a/web/gui2/src/main/webapp/app/onos-routing.module.ts
+++ b/web/gui2/src/main/webapp/app/onos-routing.module.ts
@@ -78,6 +78,10 @@
         path: 'meter',
         loadChildren: 'app/view/meter/meter.module#MeterModule'
     },
+    {
+        path: 'topo',
+        loadChildren: 'app/view/topology/topology.module#TopologyModule'
+    },
 /*  Comment out below section for running locally with 'ng serve' when developing */
     {
         path: 'alarmTable',
diff --git a/web/gui2/src/main/webapp/app/onos.common.css b/web/gui2/src/main/webapp/app/onos.common.css
index 9a3f5a6..fa6d502 100644
--- a/web/gui2/src/main/webapp/app/onos.common.css
+++ b/web/gui2/src/main/webapp/app/onos.common.css
@@ -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.
diff --git a/web/gui2/src/main/webapp/app/onos.component.css b/web/gui2/src/main/webapp/app/onos.component.css
index 7e5af04..1fd060c 100644
--- a/web/gui2/src/main/webapp/app/onos.component.css
+++ b/web/gui2/src/main/webapp/app/onos.component.css
@@ -1,5 +1,5 @@
 /*
- * Copyright 2014-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.
diff --git a/web/gui2/src/main/webapp/app/onos.component.spec.ts b/web/gui2/src/main/webapp/app/onos.component.spec.ts
new file mode 100644
index 0000000..0801494
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/onos.component.spec.ts
@@ -0,0 +1,157 @@
+/*
+ * 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 { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormsModule } from '@angular/forms';
+import { of } from 'rxjs';
+
+import { NavComponent } from './nav/nav.component';
+import { OnosComponent } from './onos.component';
+
+import {
+    LogService, ConsoleLoggerService,
+    ConfirmComponent,
+    IconComponent,
+    MastComponent,
+    VeilComponent,
+    FnService,
+    GlyphService,
+    IconService,
+    LionService,
+    NavService, UiView,
+    OnosService,
+    SvgUtilService,
+    ThemeService,
+    WebSocketService,
+    WsOptions
+} from 'gui2-fw-lib';
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
+
+class MockDialogService {}
+
+class MockGlyphService {}
+
+class MockIconService {}
+
+class MockLionService {}
+
+class MockNavService {
+    uiPlatformViews = new Array<UiView>();
+    uiNetworkViews = new Array<UiView>();
+    uiOtherViews = new Array<UiView>();
+    uiHiddenViews = new Array<UiView>();
+}
+
+class MockOnosService {}
+
+class MockThemeService {}
+
+class MockVeilComponent {}
+
+class MockWebSocketService {
+    createWebSocket() { }
+    isConnected() { return false; }
+    unbindHandlers() { }
+    bindHandlers() { }
+}
+
+/**
+ * ONOS GUI -- Onos Component - Unit Tests
+ */
+describe('OnosComponent', () => {
+    let logServiceSpy: jasmine.SpyObj<LogService>;
+    let fs: FnService;
+    let ar: MockActivatedRoute;
+    let windowMock: Window;
+    let component: OnosComponent;
+    let fixture: ComponentFixture<OnosComponent>;
+
+    beforeEach(async(() => {
+        const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+        ar = new MockActivatedRoute({'debug': 'TestService'});
+
+        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'
+            },
+            innerHeight: 240,
+            innerWidth: 320
+        };
+        fs = new FnService(ar, logSpy, windowMock);
+
+        TestBed.configureTestingModule({
+            imports: [
+                RouterTestingModule,
+                BrowserModule,
+                BrowserAnimationsModule,
+                FormsModule
+            ],
+            declarations: [
+                ConfirmComponent,
+                IconComponent,
+                MastComponent,
+                NavComponent,
+                OnosComponent,
+                VeilComponent,
+            ],
+            providers: [
+                { provide: FnService, useValue: fs },
+                { provide: GlyphService, useClass: MockGlyphService },
+                { provide: IconService, useClass: MockIconService },
+                { provide: LionService, useClass: MockLionService },
+                { provide: LogService, useValue: logSpy },
+                { provide: NavService, useClass: MockNavService },
+                { provide: OnosService, useClass: MockOnosService },
+                { provide: ThemeService, useClass: MockThemeService },
+                { provide: WebSocketService, useClass: MockWebSocketService },
+                { provide: Window, useFactory: (() => windowMock ) },
+            ]
+        }).compileComponents();
+        logServiceSpy = TestBed.get(LogService);
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(OnosComponent);
+        component = fixture.debugElement.componentInstance;
+        fixture.detectChanges();
+    });
+
+// TODO: Reimplemt this - it's compaining about "no provider for Window"
+//    it('should create the component', () => {
+//        expect(component).toBeTruthy();
+//    });
+
+//    it(`should have as title 'onos'`, async(() => {
+//        const fixture = TestBed.createComponent(OnosComponent);
+//        const app = fixture.componentInstance;
+//        expect(app.title).toEqual('onos');
+//    }));
+});
diff --git a/web/gui2/src/main/webapp/app/onos.component.ts b/web/gui2/src/main/webapp/app/onos.component.ts
index c5f5b3a..0fe1346 100644
--- a/web/gui2/src/main/webapp/app/onos.component.ts
+++ b/web/gui2/src/main/webapp/app/onos.component.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright 2014-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.
@@ -15,15 +15,15 @@
  */
 import { Component, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
 import { Observable, Subscription, fromEvent } from 'rxjs';
-import { map, filter } from 'rxjs/operators';
-
+import * as d3 from 'd3';
 import {
     LionService,
     LogService,
     ThemeService,
     GlyphService,
     WebSocketService,
-    WsOptions
+    WsOptions,
+    KeysService
 } from 'gui2-fw-lib';
 import { OnosService, View } from './onos.service';
 
@@ -81,6 +81,7 @@
         private lion: LionService,
         private ts: ThemeService,
         private gs: GlyphService,
+        private ks: KeysService,
         public wss: WebSocketService,
         private log: LogService,
         private onos: OnosService
@@ -121,36 +122,38 @@
      * quick help feature
      */
     ngAfterViewInit() {
-        const keyStrokeHandler =
-            fromEvent(document, 'keyup').pipe(map((x: KeyboardEvent) => x.keyCode));
-        this.quickHelpHandler = keyStrokeHandler.pipe(
-            filter(x => {
-                return [27, 191, 220].includes(x);
-            })
-        ).pipe(
-            map(x => {
-                let direction;
-                switch (x) {
-                    case 27:
-                        direction = 'esc';
-                        break;
-                    case 191:
-                        direction = 'fwdslash';
-                        break;
-                    case 220:
-                        direction = 'backslash';
-                        break;
-                    default:
-                        direction = 'esc';
-                }
-                return direction;
-            })
-        );
-
-        // TODO: Make a Quick Help component popup
-        this.quickHelpSub = this.quickHelpHandler.subscribe((keyname) => {
-            this.log.debug('Keystroke', keyname);
-        });
+        // const keyStrokeHandler =
+        //     fromEvent(document, 'keyup').pipe(map((x: KeyboardEvent) => x.keyCode));
+        // this.quickHelpHandler = keyStrokeHandler.pipe(
+        //     filter(x => {
+        //         return [27, 191, 220].includes(x);
+        //     })
+        // ).pipe(
+        //     map(x => {
+        //         let direction;
+        //         switch (x) {
+        //             case 27:
+        //                 direction = 'esc';
+        //                 break;
+        //             case 191:
+        //                 direction = 'fwdslash';
+        //                 break;
+        //             case 220:
+        //                 direction = 'backslash';
+        //                 break;
+        //             default:
+        //                 direction = 'esc';
+        //         }
+        //         return direction;
+        //     })
+        // );
+        //
+        // // TODO: Make a Quick Help component popup
+        // this.quickHelpSub = this.quickHelpHandler.subscribe((keyname) => {
+        //     this.log.debug('Keystroke', keyname);
+        // });
+        this.ks.installOn(d3.select('body'));
+        this.log.debug('OnosComponent after view initialized');
     }
 
     ngOnDestroy() {
diff --git a/web/gui2/src/main/webapp/app/onos.module.ts b/web/gui2/src/main/webapp/app/onos.module.ts
index 576d0f1..f9bbd15 100644
--- a/web/gui2/src/main/webapp/app/onos.module.ts
+++ b/web/gui2/src/main/webapp/app/onos.module.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright 2014-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.
diff --git a/web/gui2/src/main/webapp/tests/app/onos.service.spec.ts b/web/gui2/src/main/webapp/app/onos.service.spec.ts
similarity index 86%
rename from web/gui2/src/main/webapp/tests/app/onos.service.spec.ts
rename to web/gui2/src/main/webapp/app/onos.service.spec.ts
index 01d5aef..073dfa7 100644
--- a/web/gui2/src/main/webapp/tests/app/onos.service.spec.ts
+++ b/web/gui2/src/main/webapp/app/onos.service.spec.ts
@@ -15,9 +15,8 @@
  */
 import { TestBed, inject } from '@angular/core/testing';
 
-import { LogService } from '../../app/log.service';
-import { ConsoleLoggerService } from '../../app/consolelogger.service';
-import { OnosService } from '../../app/onos.service';
+import { LogService, ConsoleLoggerService } from 'gui2-fw-lib';
+import { OnosService } from './onos.service';
 
 /**
  * ONOS GUI -- Onos Service - Unit Tests
diff --git a/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.spec.ts b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.spec.ts
index f1dfe0d..5864743 100644
--- a/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/apps/apps/apps.component.spec.ts
@@ -140,8 +140,7 @@
                 { provide: WebSocketService, useClass: MockWebSocketService },
                 { provide: 'Window', useValue: windowMock },
             ]
-        })
-            .compileComponents();
+        }).compileComponents();
         logServiceSpy = TestBed.get(LogService);
     }));
 
diff --git a/web/gui2/src/main/webapp/app/view/cluster/cluster-details.directive.ts b/web/gui2/src/main/webapp/app/view/cluster/cluster-details.directive.ts
index c796962..17e5842 100644
--- a/web/gui2/src/main/webapp/app/view/cluster/cluster-details.directive.ts
+++ b/web/gui2/src/main/webapp/app/view/cluster/cluster-details.directive.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.
@@ -72,10 +72,14 @@
     });
 }
 
+
+/**
+ * This should not be a directive - this should be a component, like all of the other details views
+ * Change it when time allows
+ */
 @Directive({
     selector: '[onosClusterDetails]',
 })
-
 export class ClusterDetailsDirective extends DetailsPanelBaseImpl implements OnInit, OnDestroy, OnChanges {
     @Input() id: string;
     @Output() closeEvent = new EventEmitter<string>();
diff --git a/web/gui2/src/main/webapp/app/view/meter/meter/meter.theme.css b/web/gui2/src/main/webapp/app/view/meter/meter/meter.theme.css
index 9f4dea4..4a24785 100644
--- a/web/gui2/src/main/webapp/app/view/meter/meter/meter.theme.css
+++ b/web/gui2/src/main/webapp/app/view/meter/meter/meter.theme.css
@@ -1,5 +1,5 @@
 /*
- * Copyright 2016-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.
diff --git a/web/gui2/src/main/webapp/app/view/port/portdetails/portdetails.component.html b/web/gui2/src/main/webapp/app/view/port/portdetails/portdetails.component.html
index 36fa847..d4b59be 100644
--- a/web/gui2/src/main/webapp/app/view/port/portdetails/portdetails.component.html
+++ b/web/gui2/src/main/webapp/app/view/port/portdetails/portdetails.component.html
@@ -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.
diff --git a/web/gui2/src/main/webapp/app/view/topology/README.md b/web/gui2/src/main/webapp/app/view/topology/README.md
new file mode 100644
index 0000000..3f3e647
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/README.md
@@ -0,0 +1,8 @@
+# Topology
+
+This is the GUI2 version of the combined Topo and Topo2 views of the older version.
+
+It uses Angular 6 components extensively.
+
+This should all be moved to its own separate library once all debugging is done
+(it is slightly more difficult to debug the code when in a separate library)
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.css b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.css
new file mode 100644
index 0000000..642c1c4
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.css
@@ -0,0 +1,20 @@
+/*
+ * 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.
+ */
+
+
+/*
+ ONOS GUI -- Topology View (background) -- CSS file
+ */
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.html
new file mode 100644
index 0000000..3f78ebb
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.html
@@ -0,0 +1,16 @@
+<!--
+~ 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.
+-->
+<svg:g onos-mapsvg />
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.spec.ts
new file mode 100644
index 0000000..f1e1e69
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.spec.ts
@@ -0,0 +1,40 @@
+/*
+ * 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BackgroundSvgComponent } from './backgroundsvg.component';
+
+describe('BackgroundSvgComponent', () => {
+    let component: BackgroundSvgComponent;
+    let fixture: ComponentFixture<BackgroundSvgComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [ BackgroundSvgComponent ]
+        })
+        .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(BackgroundSvgComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.ts
new file mode 100644
index 0000000..6a010d1
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/backgroundsvg/backgroundsvg.component.ts
@@ -0,0 +1,33 @@
+/*
+ * 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 { Component, OnInit } from '@angular/core';
+
+/**
+ * ONOS GUI -- Topology Background Layer View.
+ */
+@Component({
+    selector: '[onos-backgroundsvg]',
+    templateUrl: './backgroundsvg.component.html',
+    styleUrls: ['./backgroundsvg.component.css']
+})
+export class BackgroundSvgComponent implements OnInit {
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}
diff --git a/web/gui2/src/main/webapp/tests/app/log.service.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.css
similarity index 60%
copy from web/gui2/src/main/webapp/tests/app/log.service.spec.ts
copy to web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.css
index 5307028..addd41c 100644
--- a/web/gui2/src/main/webapp/tests/app/log.service.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.css
@@ -13,21 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { TestBed, inject } from '@angular/core/testing';
 
-import { LogService } from '../../app/log.service';
 
-/**
- * ONOS GUI -- Log Service - Unit Tests
- */
-describe('LogService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [LogService]
-    });
-  });
-
-  it('should be created', inject([LogService], (service: LogService) => {
-    expect(service).toBeTruthy();
-  }));
-});
+/*
+ ONOS GUI -- Topology View (forces) -- CSS file
+ */
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.html
new file mode 100644
index 0000000..0c2f0aa
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.html
@@ -0,0 +1,22 @@
+<!--
+~ 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.
+-->
+<svg:g class="topo2-force">
+    <svg:g class="topo2-links" />
+    <svg:g class="topo2-linkLabels" />
+    <svg:g class="topo2-numLinkLabels" />
+    <svg:g class="topo2-nodes" />
+    <svg:g class="topo2-portLabels" />
+</svg:g>
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.spec.ts
new file mode 100644
index 0000000..505c528
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.spec.ts
@@ -0,0 +1,40 @@
+/*
+ * 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ForceSvgComponent } from './forcesvg.component';
+
+describe('ForceSvgComponent', () => {
+    let component: ForceSvgComponent;
+    let fixture: ComponentFixture<ForceSvgComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+          declarations: [ ForceSvgComponent ]
+        })
+        .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ForceSvgComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.ts
new file mode 100644
index 0000000..45fa000
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/forcesvg/forcesvg.component.ts
@@ -0,0 +1,33 @@
+/*
+ * 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 { Component, OnInit } from '@angular/core';
+
+/**
+ * ONOS GUI -- Topology Forces Graph Layer View.
+ */
+@Component({
+    selector: '[onos-forcesvg]',
+    templateUrl: './forcesvg.component.html',
+    styleUrls: ['./forcesvg.component.css']
+})
+export class ForceSvgComponent implements OnInit {
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/layout/layout.component.css b/web/gui2/src/main/webapp/app/view/topology/layer/layout/layout.component.css
new file mode 100644
index 0000000..beb3725
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/layout/layout.component.css
@@ -0,0 +1,15 @@
+/*
+ * 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.
+ */
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/layout/layout.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/layout/layout.component.html
new file mode 100644
index 0000000..8fe566b
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/layout/layout.component.html
@@ -0,0 +1,18 @@
+<!--
+~ 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.
+-->
+<p>
+  layout works!
+</p>
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/layout/layout.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/layout/layout.component.spec.ts
new file mode 100644
index 0000000..1691947
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/layout/layout.component.spec.ts
@@ -0,0 +1,40 @@
+/*
+ * 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LayoutComponent } from './layout.component';
+
+describe('LayoutComponent', () => {
+  let component: LayoutComponent;
+  let fixture: ComponentFixture<LayoutComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LayoutComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/layout/layout.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/layout/layout.component.ts
new file mode 100644
index 0000000..477dd15
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/layout/layout.component.ts
@@ -0,0 +1,30 @@
+/*
+ * 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 { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'onos-layout',
+  templateUrl: './layout.component.html',
+  styleUrls: ['./layout.component.css']
+})
+export class LayoutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/web/gui2/src/main/webapp/tests/app/log.service.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.css
similarity index 60%
copy from web/gui2/src/main/webapp/tests/app/log.service.spec.ts
copy to web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.css
index 5307028..f206973 100644
--- a/web/gui2/src/main/webapp/tests/app/log.service.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.css
@@ -13,21 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { TestBed, inject } from '@angular/core/testing';
-
-import { LogService } from '../../app/log.service';
 
 /**
- * ONOS GUI -- Log Service - Unit Tests
- */
-describe('LogService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [LogService]
-    });
-  });
-
-  it('should be created', inject([LogService], (service: LogService) => {
-    expect(service).toBeTruthy();
-  }));
-});
+ * ONOS GUI -- Topology Map Layer -- CSS file
+ */
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.html
new file mode 100644
index 0000000..4f3b14f
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.html
@@ -0,0 +1,17 @@
+<!--
+~ 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.
+-->
+<svg:text>Map of Croatia</svg:text>
+<svg:path d="m 187.50819,219.30177 -3.14986,-1.57795 z M 45.764161,56.635237 48.914029,55.022914 Z m 62.997349,-32.313055 6.29973,4.85593 6.29974,11.31816 v 11.300949 h 9.4496 l 12.59947,8.061616 6.29973,12.880483 v 8.039036 l 6.29974,14.448536 -3.14987,9.616908 -6.29973,12.80342 v 14.37787 l 3.14986,7.97587 -9.4496,3.18799 3.14987,9.55592 6.29973,4.77344 v 7.94906 l -6.29973,1.58881 3.14987,15.86987 6.29973,6.33869 v 6.33341 l 6.29974,1.58253 v 20.54314 h 6.29973 18.89921 l 3.14986,4.73289 v 1.57699 6.30469 l -3.14986,4.72511 6.29973,6.29564 v 1.57311 l 3.14987,7.8607 -9.4496,17.26536 h -9.44961 l -6.29973,4.70203 v 14.08899 l -6.29974,3.12741 v 15.61816 l -3.14986,6.23849 -22.04907,3.11737 -3.14987,7.78797 h -6.29974 l 9.44961,17.10623 -3.14987,6.21118 -6.29974,-1.55233 v 10.85988 l -6.29973,7.74786 -18.89921,-6.19768 v -20.17635 l -6.299731,-3.10867 v -6.22107 l -6.299735,-10.8988 -9.449602,-3.11675 v -4.67746 l -9.449602,-1.55978 -6.299735,-6.24224 -9.449602,-3.123 -9.449602,-12.5046 -3.149867,-14.09183 12.599469,12.52734 3.149868,-12.52734 -9.449602,-9.40886 6.299734,1.56894 v -7.84788 l -6.299734,1.57021 -6.299735,-9.4261 3.149867,-4.71738 V 228.7627 l 3.149868,-9.46093 6.299734,-3.15624 v -31.63431 l 6.299735,-7.92914 -3.149867,-6.34927 H 52.063896 V 155.9275 l 9.449602,-9.5519 -9.449602,-7.96914 h 12.599469 v -27.15822 l -12.599469,-6.40444 -6.299735,1.60162 V 82.385126 l 3.149868,-3.213886 6.299734,1.607116 3.149868,-8.039036 -12.59947,-9.658277 6.299735,-9.6708 -3.149867,-1.613022 6.299734,-11.300949 6.299735,-4.848528 v -6.469632 l 6.299735,-3.236933 v -8.098523 l 9.449602,-4.863368 3.149867,3.2426 v 14.574161 l 6.299735,3.234816 12.59947,-3.234816 z"></svg:path>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.spec.ts
new file mode 100644
index 0000000..e1000c8
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.spec.ts
@@ -0,0 +1,40 @@
+/*
+ * 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MapSvgComponent } from './mapsvg.component';
+
+describe('MapSvgComponent', () => {
+  let component: MapSvgComponent;
+  let fixture: ComponentFixture<MapSvgComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MapSvgComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MapSvgComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.ts
new file mode 100644
index 0000000..2de6c12
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/mapsvg/mapsvg.component.ts
@@ -0,0 +1,30 @@
+/*
+ * 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 { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: '[onos-mapsvg]',
+    templateUrl: './mapsvg.component.html',
+    styleUrls: ['./mapsvg.component.css']
+})
+export class MapSvgComponent implements OnInit {
+
+    constructor() { }
+
+    ngOnInit() {
+    }
+
+}
diff --git a/web/gui2/src/main/webapp/tests/app/log.service.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.css
similarity index 60%
copy from web/gui2/src/main/webapp/tests/app/log.service.spec.ts
copy to web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.css
index 5307028..7897595 100644
--- a/web/gui2/src/main/webapp/tests/app/log.service.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.css
@@ -13,21 +13,22 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { TestBed, inject } from '@angular/core/testing';
 
-import { LogService } from '../../app/log.service';
 
-/**
- * ONOS GUI -- Log Service - Unit Tests
+/*
+ ONOS GUI -- Topology View (no devices connected) -- CSS file
  */
-describe('LogService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [LogService]
-    });
-  });
+/* --- "No Devices" Layer --- */
+#topo-noDevsLayer {
+    visibility: hidden;
+}
 
-  it('should be created', inject([LogService], (service: LogService) => {
-    expect(service).toBeTruthy();
-  }));
-});
+#topo-noDevsLayer text {
+    font-size: 60pt;
+    font-style: italic;
+    fill: #7e9aa8;
+}
+
+#topo-noDevsLayer .noDevsBird {
+    fill: #db7773;
+}
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.html
new file mode 100644
index 0000000..d201c8a
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.html
@@ -0,0 +1,21 @@
+<!--
+~ 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.
+-->
+<svg:g id="topo-noDevsLayer" transform="translate(500,500)" style="visibility: visible;">
+    <svg:g id="reposition" #reposition [attr.transform]="centre(reposition.getBBox())">
+        <svg:use width="100" height="100" class="noDevsBird" href="#bird"></svg:use>
+        <svg:text x="120" y="80">No Devices Are Connected</svg:text>
+    </svg:g>
+</svg:g>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.spec.ts
new file mode 100644
index 0000000..a467a3d
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.spec.ts
@@ -0,0 +1,94 @@
+/*
+ * 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { NoDeviceConnectedSvgComponent } from './nodeviceconnectedsvg.component';
+import { DebugElement } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import {
+    FnService,
+    IconService,
+    LionService,
+    LogService,
+    UrlFnService,
+    TableFilterPipe,
+    IconComponent,
+    WebSocketService
+} from 'gui2-fw-lib';
+import { of } from 'rxjs';
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
+
+class MockIconService {
+    classes = 'active-close';
+    loadIconDef() { }
+}
+
+class MockWebSocketService {
+    createWebSocket() { }
+    isConnected() { return false; }
+    unbindHandlers() { }
+    bindHandlers() { }
+}
+
+/**
+ * ONOS GUI -- Topology NoDevicesConnected -- Unit Tests
+ */
+describe('NoDeviceConnectedSvgComponent', () => {
+    let fs: FnService;
+    let ar: MockActivatedRoute;
+    let windowMock: Window;
+    let logServiceSpy: jasmine.SpyObj<LogService>;
+    let component: NoDeviceConnectedSvgComponent;
+    let fixture: ComponentFixture<NoDeviceConnectedSvgComponent>;
+
+
+    beforeEach(async(() => {
+        const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+        ar = new MockActivatedRoute({'debug': 'panel'});
+
+        windowMock = <any>{
+        };
+        fs = new FnService(ar, logSpy, windowMock);
+
+        TestBed.configureTestingModule({
+            declarations: [ NoDeviceConnectedSvgComponent ],
+            providers: [
+                { provide: FnService, useValue: fs },
+                { provide: IconService, useClass: MockIconService },
+                { provide: LogService, useValue: logSpy },
+                { provide: WebSocketService, useClass: MockWebSocketService },
+                { provide: 'Window', useValue: windowMock },
+            ]
+        }).compileComponents();
+        logServiceSpy = TestBed.get(LogService);
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(NoDeviceConnectedSvgComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.ts
new file mode 100644
index 0000000..2ff9ed1
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component.ts
@@ -0,0 +1,67 @@
+/*
+ * 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 { Component, OnInit } from '@angular/core';
+import { ViewControllerImpl } from '../viewcontroller';
+import {
+    FnService,
+    LogService,
+    PrefsService,
+    IconService,
+    SvgUtilService
+} from 'gui2-fw-lib';
+
+/**
+ * ONOS GUI -- Topology No Connected Devices View.
+ * View that contains the 'No Connected Devices' message
+ *
+ * This component is an SVG snippet that expects to be in an SVG element with a view box of 1000x1000
+ *
+ * It should be added to a template with a tag like <svg:g onos-nodeviceconnected />
+ */
+@Component({
+  selector: '[onos-nodeviceconnected]',
+  templateUrl: './nodeviceconnectedsvg.component.html',
+  styleUrls: ['./nodeviceconnectedsvg.component.css']
+})
+export class NoDeviceConnectedSvgComponent extends ViewControllerImpl implements OnInit {
+
+    constructor(
+        protected fs: FnService,
+        protected log: LogService,
+        protected ps: PrefsService,
+        protected is: IconService,
+        protected sus: SvgUtilService
+    ) {
+        super(fs, log, ps);
+        this.is.loadIconDef('bird');
+        this.log.debug('NoDeviceConnectedSvgComponent constructed');
+    }
+
+    ngOnInit() {
+        this.log.debug('NoDeviceConnectedSvgComponent initialized');
+    }
+
+    /*
+     * The whole SVG canvas is based on a 1000 by 1000 box
+     */
+    centre(repositionBox: SVGRect) {
+        const scale: number = Number.parseFloat((1000 / repositionBox.width).toFixed(3));
+        repositionBox.x -= Number.parseFloat((repositionBox.width * scale / 2).toFixed(0));
+        repositionBox.y -= Number.parseFloat((repositionBox.height * scale / 2).toFixed(0));
+        return this.sus.translate([repositionBox.x, repositionBox.y]) + '' + this.sus.scale(scale, scale);
+    }
+
+}
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/viewcontroller.ts b/web/gui2/src/main/webapp/app/view/topology/layer/viewcontroller.ts
new file mode 100644
index 0000000..1b40195
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/viewcontroller.ts
@@ -0,0 +1,82 @@
+/*
+ * 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, LogService, PrefsService } from 'gui2-fw-lib';
+
+export interface ViewControllerPrefs {
+    visible: string;
+}
+
+/*
+ ONOS GUI -- View Controller.
+ A base class for view controllers to extend from
+ */
+export abstract class ViewControllerImpl {
+    id: string;
+    displayName: string = 'View';
+    name: string;
+    prefs: ViewControllerPrefs;
+    visibility: string;
+
+    constructor(
+        protected fs: FnService,
+        protected log: LogService,
+        protected ps: PrefsService
+    ) {
+        this.log.debug('View Controller constructed');
+    }
+
+    initialize() {
+        this.name = this.displayName.toLowerCase().replace(/ /g, '_');
+        this.prefs = {
+            visible: this.name + '_visible',
+        };
+    }
+
+    enabled() {
+        return this.ps.getPrefs('topo2_prefs', null)[this.prefs.visible];
+    }
+
+    isVisible() {
+        return this.visibility;
+    }
+
+    hide() {
+        this.visibility = 'hidden';
+    }
+
+    show() {
+        this.visibility = 'visible';
+    }
+
+    toggle() {
+        if (this.visibility === 'hidden') {
+            this.visibility = 'visible';
+        } else if (this.visibility === 'visible') {
+            this.visibility = 'hidden';
+        }
+    }
+
+    lookupPrefState(key: string): number {
+        // Return 0 if not defined
+        return this.ps.getPrefs('topo2_prefs', null)[key] || 0;
+    }
+
+    updatePrefState(key: string, value: number) {
+        const state = this.ps.getPrefs('topo2_prefs', null);
+        state[key] = value ? 1 : 0;
+        this.ps.setPrefs('topo2_prefs', state);
+    }
+}
diff --git a/web/gui2/src/main/webapp/tests/app/log.service.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/zoomlayersvg/zoomlayersvg.component.css
similarity index 60%
copy from web/gui2/src/main/webapp/tests/app/log.service.spec.ts
copy to web/gui2/src/main/webapp/app/view/topology/layer/zoomlayersvg/zoomlayersvg.component.css
index 5307028..fca0dc7 100644
--- a/web/gui2/src/main/webapp/tests/app/log.service.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/zoomlayersvg/zoomlayersvg.component.css
@@ -13,21 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { TestBed, inject } from '@angular/core/testing';
-
-import { LogService } from '../../app/log.service';
 
 /**
- * ONOS GUI -- Log Service - Unit Tests
- */
-describe('LogService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [LogService]
-    });
-  });
-
-  it('should be created', inject([LogService], (service: LogService) => {
-    expect(service).toBeTruthy();
-  }));
-});
+ * ONOS GUI -- Topology Zoom Layer -- CSS file
+ */
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/zoomlayersvg/zoomlayersvg.component.html b/web/gui2/src/main/webapp/app/view/topology/layer/zoomlayersvg/zoomlayersvg.component.html
new file mode 100644
index 0000000..6f1bb4b
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/zoomlayersvg/zoomlayersvg.component.html
@@ -0,0 +1,19 @@
+<!--
+~ 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.
+-->
+<svg:g id="topo-zoomlayer">
+    <svg:g onos-backgroundsvg/>
+    <svg:g onos-forcesvg/>
+</svg:g>
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/zoomlayersvg/zoomlayersvg.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/layer/zoomlayersvg/zoomlayersvg.component.spec.ts
new file mode 100644
index 0000000..60a1997
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/zoomlayersvg/zoomlayersvg.component.spec.ts
@@ -0,0 +1,86 @@
+/*
+ * 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { of } from 'rxjs';
+
+import { ZoomLayerSvgComponent } from './zoomlayersvg.component';
+import {
+    FnService,
+    LogService,
+    ZoomService
+} from 'gui2-fw-lib';
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
+
+class MockZoomService {}
+
+/**
+ * ONOS GUI -- Topology View Zoom Layer -- Unit Tests
+ */
+describe('ZoomLayerSvgComponent', () => {
+    let fs: FnService;
+    let ar: MockActivatedRoute;
+    let windowMock: Window;
+    let logServiceSpy: jasmine.SpyObj<LogService>;
+    let component: ZoomLayerSvgComponent;
+    let fixture: ComponentFixture<ZoomLayerSvgComponent>;
+
+    beforeEach(async(() => {
+        const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+        ar = new MockActivatedRoute({ 'debug': 'txrx' });
+
+        windowMock = <any>{
+            location: <any>{
+                hostname: 'foo',
+                host: 'foo',
+                port: '80',
+                protocol: 'http',
+                search: { debug: 'true' },
+                href: 'ws://foo:123/onos/ui/websock/path',
+                absUrl: 'ws://foo:123/onos/ui/websock/path'
+            }
+        };
+        fs = new FnService(ar, logSpy, windowMock);
+
+        TestBed.configureTestingModule({
+            declarations: [ ZoomLayerSvgComponent ],
+            providers: [
+                { provide: FnService, useValue: fs },
+                { provide: LogService, useValue: logSpy },
+                { provide: 'Window', useValue: windowMock },
+                { provide: ZoomService, useClass: MockZoomService }
+            ]
+        })
+        .compileComponents();
+        logServiceSpy = TestBed.get(LogService);
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ZoomLayerSvgComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/web/gui2/src/main/webapp/app/view/topology/layer/zoomlayersvg/zoomlayersvg.component.ts b/web/gui2/src/main/webapp/app/view/topology/layer/zoomlayersvg/zoomlayersvg.component.ts
new file mode 100644
index 0000000..e0c85ed
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/layer/zoomlayersvg/zoomlayersvg.component.ts
@@ -0,0 +1,112 @@
+/*
+ * 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 { Component, OnInit } from '@angular/core';
+import {
+    FnService,
+    LogService,
+    ZoomService, Zoomer, ZoomOpts
+} from 'gui2-fw-lib';
+
+/**
+ * ONOS GUI -- Topology Zoom Layer View.
+ * View that contains the 'Force graph' message
+ *
+ * This component is an SVG snippet that expects to be in an SVG element with a view box of 1000x1000
+ *
+ * It should be added to a template with a tag like <svg:g onos-zoomlayer />
+ */
+@Component({
+  selector: '[onos-zoomlayer]',
+  templateUrl: './zoomlayersvg.component.html',
+  styleUrls: ['./zoomlayersvg.component.css']
+})
+export class ZoomLayerSvgComponent implements OnInit {
+    zoomer: Zoomer;
+    zoomEventListeners: any[];
+
+    constructor(
+        protected fs: FnService,
+        protected log: LogService,
+        protected zs: ZoomService
+    ) {
+        this.log.debug('ZoomLayerSvgComponent constructed');
+    }
+
+    ngOnInit() {
+
+    }
+
+    createZoomer(options: ZoomOpts) {
+        // need to wrap the original zoom callback to extend its behavior
+        const origCallback = this.fs.isF(options.zoomCallback) ? options.zoomCallback : () => {};
+
+        options.zoomCallback = () => {
+            origCallback([0, 0], 1);
+
+            this.zoomEventListeners.forEach((ev) => ev(this.zoomer));
+        };
+
+        this.zoomer = this.zs.createZoomer(options);
+        return this.zoomer;
+    }
+
+    getZoomer() {
+        return this.zoomer;
+    }
+
+    findZoomEventListener(ev) {
+        for (let i = 0, len = this.zoomEventListeners.length; i < len; i++) {
+            if (this.zoomEventListeners[i] === ev) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
+    addZoomEventListener(callback) {
+        this.zoomEventListeners.push(callback);
+    }
+
+    removeZoomEventListener(callback) {
+        const evIndex = this.findZoomEventListener(callback);
+
+        if (evIndex !== -1) {
+            this.zoomEventListeners.splice(evIndex);
+        }
+    }
+
+    adjustmentScale(min: number, max: number): number {
+        let _scale = 1;
+        const size = (min + max) / 2;
+
+        if (size * this.scale() < max) {
+            _scale = min / (size * this.scale());
+        } else if (size * this.scale() > max) {
+            _scale = min / (size * this.scale());
+        }
+
+        return _scale;
+    }
+
+    scale(): number {
+        return this.zoomer.scale();
+    }
+
+    panAndZoom(translate: number[], scale: number, transition?: number) {
+        this.zoomer.panZoom(translate, scale, transition);
+    }
+
+}
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.css b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.css
new file mode 100644
index 0000000..9a35cb3
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.css
@@ -0,0 +1,36 @@
+/*
+ * 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.
+ */
+/* --- Topo Details Panel --- */
+
+#topo2-p-detail {
+    padding: 16px;
+    top: 370px;
+}
+html[data-platform='iPad'] #topo2-p-detail {
+    top: 386px;
+}
+
+#topo2-p-detail .actionBtns .actionBtn {
+    display: inline-block;
+}
+#topo2-p-detail .actionBtns .actionBtn svg {
+    width: 28px;
+    height: 28px;
+}
+
+#topo2-p-detail  div.actionBtns {
+    padding-top: 6px;
+}
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.html b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.html
new file mode 100644
index 0000000..1ff43e6
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.html
@@ -0,0 +1,128 @@
+<!--
+~ 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.
+-->
+<div id="topo2-p-detail" class="floatpanel topo2-p"
+     style="opacity: 1; right: 20px; width: 260px; top: 350px;" [@detailsPanelState]="!on">
+    <div class="header">
+        <div class="icon clickable">
+            <svg>
+                <use width="26" height="26" class="glyph" xlink:href="#m_switch"></use>
+            </svg>
+        </div>
+        <h2 class="clickable">rest:10.1.2.2:443</h2>
+    </div>
+    <div class="body">
+        <table>
+            <tbody>
+            <tr>
+                <td class="label">URI :</td>
+                <td class="value">null:0000000000000002</td>
+            </tr>
+            <tr>
+                <td class="label">Vendor :</td>
+                <td class="value">ONF</td>
+            </tr>
+            <tr>
+                <td class="label">H/W Version :</td>
+                <td class="value">0.1</td>
+            </tr>
+            <tr>
+                <td class="label">S/W Version :</td>
+                <td class="value">0.1</td>
+            </tr>
+            <tr>
+                <td class="label">Serial # :</td>
+                <td class="value">1234</td>
+            </tr>
+            <tr>
+                <td class="label">Protocol :</td>
+                <td class="value"></td>
+            </tr>
+            <tr>
+                <td colspan="2">
+                    <hr>
+                </td>
+            </tr>
+            <tr>
+                <td class="label">Ports :</td>
+                <td class="value">4</td>
+            </tr>
+            <tr>
+                <td class="label">Flows :</td>
+                <td class="value">4</td>
+            </tr>
+            <tr>
+                <td class="label">Tunnels :</td>
+                <td class="value">0</td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+    <div class="footer">
+        <hr>
+        <div class="actionBtns">
+            <div class="actionBtn">
+                <div class="button" id="topo2-p-detail-core-showDeviceView">
+                    <svg class="embeddedIcon" width="25" height="25" viewBox="0 0 50 50">
+                        <g class="icon">
+                            <rect width="50" height="50" rx="5"></rect>
+                            <use width="50" height="50" class="glyph" xlink:href="#switch"></use>
+                        </g>
+                    </svg>
+                </div>
+            </div>
+            <div class="actionBtn">
+                <div class="button" id="topo2-p-detail-core-showFlowView">
+                    <svg class="embeddedIcon" width="25" height="25" viewBox="0 0 50 50">
+                        <g class="icon">
+                            <rect width="50" height="50" rx="5"></rect>
+                            <use width="50" height="50" class="glyph" xlink:href="#flowTable"></use>
+                        </g>
+                    </svg>
+                </div>
+            </div>
+            <div class="actionBtn">
+                <div class="button" id="topo2-p-detail-core-showPortView">
+                    <svg class="embeddedIcon" width="25" height="25" viewBox="0 0 50 50">
+                        <g class="icon">
+                            <rect width="50" height="50" rx="5"></rect>
+                            <use width="50" height="50" class="glyph" xlink:href="#portTable"></use>
+                        </g>
+                    </svg>
+                </div>
+            </div>
+            <div class="actionBtn">
+                <div class="button" id="topo2-p-detail-core-showGroupView">
+                    <svg class="embeddedIcon" width="25" height="25" viewBox="0 0 50 50">
+                        <g class="icon">
+                            <rect width="50" height="50" rx="5"></rect>
+                            <use width="50" height="50" class="glyph" xlink:href="#groupTable"></use>
+                        </g>
+                    </svg>
+                </div>
+            </div>
+            <div class="actionBtn">
+                <div class="button" id="topo2-p-detail-core-showMeterView">
+                    <svg class="embeddedIcon" width="25" height="25" viewBox="0 0 50 50">
+                        <g class="icon">
+                            <rect width="50" height="50" rx="5"></rect>
+                            <use width="50" height="50" class="glyph" xlink:href="#meterTable"></use>
+                        </g>
+                    </svg>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.spec.ts
new file mode 100644
index 0000000..0c0c269
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.spec.ts
@@ -0,0 +1,84 @@
+/*
+ * 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { of } from 'rxjs';
+import { DetailsComponent } from './details.component';
+
+import {
+    FnService,
+    LogService
+} from 'gui2-fw-lib';
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
+
+/**
+ * ONOS GUI -- Topology View Details Panel-- Unit Tests
+ */
+describe('DetailsComponent', () => {
+    let fs: FnService;
+    let ar: MockActivatedRoute;
+    let windowMock: Window;
+    let logServiceSpy: jasmine.SpyObj<LogService>;
+    let component: DetailsComponent;
+    let fixture: ComponentFixture<DetailsComponent>;
+
+    beforeEach(async(() => {
+        const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+        ar = new MockActivatedRoute({ 'debug': 'txrx' });
+
+        windowMock = <any>{
+            location: <any>{
+                hostname: 'foo',
+                host: 'foo',
+                port: '80',
+                protocol: 'http',
+                search: { debug: 'true' },
+                href: 'ws://foo:123/onos/ui/websock/path',
+                absUrl: 'ws://foo:123/onos/ui/websock/path'
+            }
+        };
+        fs = new FnService(ar, logSpy, windowMock);
+
+        TestBed.configureTestingModule({
+            imports: [ BrowserAnimationsModule ],
+            declarations: [ DetailsComponent ],
+            providers: [
+                { provide: FnService, useValue: fs },
+                { provide: LogService, useValue: logSpy },
+                { provide: 'Window', useValue: windowMock },
+            ]
+        })
+        .compileComponents();
+        logServiceSpy = TestBed.get(LogService);
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(DetailsComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.ts b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.ts
new file mode 100644
index 0000000..c8bf95b
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.component.ts
@@ -0,0 +1,68 @@
+/*
+ * 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 { Component, OnInit } from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import {
+    LogService,
+    LoadingService,
+    FnService,
+    DetailsPanelBaseImpl,
+    WebSocketService
+} from 'gui2-fw-lib';
+
+/*
+ ONOS GUI -- Topology Details Panel.
+ Displays details of selected device.
+ */
+@Component({
+    selector: 'onos-details',
+    templateUrl: './details.component.html',
+    styleUrls: [
+        './details.component.css', './details.theme.css',
+        '../../topology.common.css',
+        '../../../../fw/widget/panel.css', '../../../../fw/widget/panel-theme.css'
+    ],
+    animations: [
+        trigger('detailsPanelState', [
+            state('true', style({
+                transform: 'translateX(0%)',
+                opacity: '100'
+            })),
+            state('false', style({
+                transform: 'translateX(100%)',
+                opacity: '0'
+            })),
+            transition('0 => 1', animate('100ms ease-in')),
+            transition('1 => 0', animate('100ms ease-out'))
+        ])
+    ]
+})
+export class DetailsComponent extends DetailsPanelBaseImpl implements OnInit {
+
+    constructor(
+        protected fs: FnService,
+        protected log: LogService,
+        protected ls: LoadingService,
+        protected wss: WebSocketService,
+    ) {
+        super(fs, ls, log, wss, 'topo');
+        this.log.debug('InstanceComponent constructed');
+    }
+
+    ngOnInit() {
+    }
+
+}
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/details/details.theme.css b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.theme.css
new file mode 100644
index 0000000..7ad72dd
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/details/details.theme.css
@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+/* --- Topo Details Panel Theme --- */
+
+#topo2-p-detail svg {
+    background: none;
+}
+
+#topo2-p-detail .header svg .glyph {
+    fill: #c0242b;
+}
+
+.dark #topo2-p-detail .header svg .glyph {
+    fill: #91292f;
+}
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.css b/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.css
new file mode 100644
index 0000000..cb78e8d
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.css
@@ -0,0 +1,38 @@
+/*
+ * 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.
+ */
+/* --- Topo Instance Panel --- */
+
+#topo-p-instance {
+    height: 85px;
+    padding: 10px;
+}
+
+#topo-p-instance div.onosInst {
+    display: inline-block;
+    width: 170px;
+    height: 85px;
+    cursor: pointer;
+}
+
+#topo-p-instance svg text.instTitle {
+    font-size: 11pt;
+    font-weight: bold;
+    font-variant: small-caps;
+    text-transform: uppercase;
+}
+#topo-p-instance svg text.instLabel {
+    font-size: 10pt;
+}
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.html b/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.html
new file mode 100644
index 0000000..6a1aba9
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.html
@@ -0,0 +1,29 @@
+<!--
+~ 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.
+-->
+<div id="topo-p-instance" class="floatpanel" style="left: 20px; width: 170px; height: 85px;" [@instancePanelState]="!on">
+    <div class="onosInst online ready mastership affinity">
+        <svg width="170" height="85" viewBox="0 0 170 85">
+            <rect x="5" y="5" width="160" height="30" style="fill: rgb(91, 153, 210);"></rect>
+            <rect x="5" y="35" width="160" height="45"></rect>
+            <use width="20" height="20" class="glyph badgeIcon bird" xlink:href="#bird" transform="translate(15,10)"></use>
+            <use width="16" height="16" class="glyph overlay badgeIcon readyBadge" xlink:href="#checkMark" transform="translate(18,40)"></use>
+            <text class="instTitle" x="48" y="27">127.0.0.1</text>
+            <text class="instLabel ip" x="48" y="55">127.0.0.1</text>
+            <text class="instLabel ns" x="48" y="73">Devices: 0</text>
+            <use width="24" height="24" class="glyph overlay badgeIcon uiBadge" xlink:href="#uiAttached" transform="translate(14,54)"></use>
+        </svg>
+    </div>
+</div>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.spec.ts
new file mode 100644
index 0000000..a03f23e
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.spec.ts
@@ -0,0 +1,84 @@
+/*
+ * 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { of } from 'rxjs';
+import { InstanceComponent } from './instance.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import {
+    FnService,
+    LogService
+} from 'gui2-fw-lib';
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
+
+/**
+ * ONOS GUI -- Topology View Instance Panel-- Unit Tests
+ */
+describe('InstanceComponent', () => {
+    let fs: FnService;
+    let ar: MockActivatedRoute;
+    let windowMock: Window;
+    let logServiceSpy: jasmine.SpyObj<LogService>;
+    let component: InstanceComponent;
+    let fixture: ComponentFixture<InstanceComponent>;
+
+    beforeEach(async(() => {
+        const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+        ar = new MockActivatedRoute({ 'debug': 'txrx' });
+
+        windowMock = <any>{
+            location: <any>{
+                hostname: 'foo',
+                host: 'foo',
+                port: '80',
+                protocol: 'http',
+                search: { debug: 'true' },
+                href: 'ws://foo:123/onos/ui/websock/path',
+                absUrl: 'ws://foo:123/onos/ui/websock/path'
+            }
+        };
+        fs = new FnService(ar, logSpy, windowMock);
+
+        TestBed.configureTestingModule({
+            imports: [ BrowserAnimationsModule ],
+            declarations: [ InstanceComponent ],
+            providers: [
+                { provide: FnService, useValue: fs },
+                { provide: LogService, useValue: logSpy },
+                { provide: 'Window', useValue: windowMock },
+            ]
+        })
+        .compileComponents();
+        logServiceSpy = TestBed.get(LogService);
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(InstanceComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.ts b/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.ts
new file mode 100644
index 0000000..66b2a05
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.component.ts
@@ -0,0 +1,66 @@
+/*
+ * 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 { Component, OnInit, Input } from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import {
+    LogService,
+    LoadingService,
+    FnService,
+    PanelBaseImpl
+} from 'gui2-fw-lib';
+
+/*
+ ONOS GUI -- Topology Instances Panel.
+ Displays ONOS instances.
+ */
+@Component({
+    selector: 'onos-instance',
+    templateUrl: './instance.component.html',
+    styleUrls: [
+        './instance.component.css', './instance.theme.css',
+        '../../topology.common.css',
+        '../../../../fw/widget/panel.css', '../../../../fw/widget/panel-theme.css'
+    ],
+    animations: [
+        trigger('instancePanelState', [
+            state('true', style({
+                transform: 'translateX(0%)',
+                opacity: '100'
+            })),
+            state('false', style({
+                transform: 'translateX(-100%)',
+                opacity: '0'
+            })),
+            transition('0 => 1', animate('100ms ease-in')),
+            transition('1 => 0', animate('100ms ease-out'))
+        ])
+    ]
+})
+export class InstanceComponent extends PanelBaseImpl implements OnInit {
+
+    constructor(
+        protected fs: FnService,
+        protected log: LogService,
+        protected ls: LoadingService,
+    ) {
+        super(fs, ls, log);
+        this.log.debug('InstanceComponent constructed');
+    }
+
+    ngOnInit() {
+    }
+
+}
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.theme.css b/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.theme.css
new file mode 100644
index 0000000..a20711d
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/instance/instance.theme.css
@@ -0,0 +1,37 @@
+/*
+ * 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.
+ */
+/* --- Topo Instance Panel --- */
+
+#topo-p-instance svg rect {
+    stroke-width: 0;
+    fill: #fbfbfb;
+}
+
+/* body of an instance */
+#topo-p-instance .online svg rect {
+    opacity: 1;
+    fill: #fbfbfb;
+}
+
+#topo-p-instance svg .glyph {
+    fill: #fff;
+}
+#topo-p-instance .online svg .glyph {
+    fill: #fff;
+}
+.dark #topo-p-instance .online svg .glyph.overlay {
+    fill: #fff;
+}
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.css b/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.css
new file mode 100644
index 0000000..56f0cc9
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.css
@@ -0,0 +1,27 @@
+/*
+ * 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 -- Topology Summary Panel -- CSS file
+ */
+#topo2-p-summary {
+    padding: 16px;
+}
+
+#topo2-p-summary  td.label {
+    width: 50%;
+}
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.html b/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.html
new file mode 100644
index 0000000..e71b58d
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.html
@@ -0,0 +1,76 @@
+<!--
+~ 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.
+-->
+<div id="topo2-p-summary" class="floatpanel topo2-p"
+     style="opacity: 1; right: 20px; width: 260px;" [@summaryPanelState]="!on">
+    <div class="header">
+        <div class="icon">
+            <svg>
+                <use width="24" height="24" class="glyph" xlink:href="#bird"
+                     transform="translate(1,1)"></use>
+            </svg>
+        </div>
+        <h2>ONOS Summary</h2>
+    </div>
+    <div class="body">
+        <table>
+            <tbody>
+            <tr>
+                <td class="label">Version :</td>
+                <td class="value">1.15.0.a18e6e1</td>
+            </tr>
+            <tr>
+                <td colspan="2">
+                    <hr>
+                </td>
+            </tr>
+            <tr>
+                <td class="label">Devices :</td>
+                <td class="value">2</td>
+            </tr>
+            <tr>
+                <td class="label">Links :</td>
+                <td class="value">0</td>
+            </tr>
+            <tr>
+                <td class="label">Hosts :</td>
+                <td class="value">0</td>
+            </tr>
+            <tr>
+                <td class="label">Topology SCCs :</td>
+                <td class="value">2</td>
+            </tr>
+            <tr>
+                <td colspan="2">
+                    <hr>
+                </td>
+            </tr>
+            <tr>
+                <td class="label">Intents :</td>
+                <td class="value">0</td>
+            </tr>
+            <tr>
+                <td class="label">Tunnels :</td>
+                <td class="value">0</td>
+            </tr>
+            <tr>
+                <td class="label">Flows :</td>
+                <td class="value">8</td>
+            </tr>
+            </tbody>
+        </table>
+    </div>
+    <div class="footer"></div>
+</div>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.spec.ts
new file mode 100644
index 0000000..5f69c19
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.spec.ts
@@ -0,0 +1,84 @@
+/*
+ * 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { of } from 'rxjs';
+import { SummaryComponent } from './summary.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import {
+    FnService,
+    LogService
+} from 'gui2-fw-lib';
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
+
+/**
+ * ONOS GUI -- Topology View Summary Panel -- Unit Tests
+ */
+describe('SummaryComponent', () => {
+    let fs: FnService;
+    let ar: MockActivatedRoute;
+    let windowMock: Window;
+    let logServiceSpy: jasmine.SpyObj<LogService>;
+    let component: SummaryComponent;
+    let fixture: ComponentFixture<SummaryComponent>;
+
+    beforeEach(async(() => {
+        const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+        ar = new MockActivatedRoute({ 'debug': 'txrx' });
+
+        windowMock = <any>{
+            location: <any>{
+                hostname: 'foo',
+                host: 'foo',
+                port: '80',
+                protocol: 'http',
+                search: { debug: 'true' },
+                href: 'ws://foo:123/onos/ui/websock/path',
+                absUrl: 'ws://foo:123/onos/ui/websock/path'
+            }
+        };
+        fs = new FnService(ar, logSpy, windowMock);
+
+        TestBed.configureTestingModule({
+            imports: [ BrowserAnimationsModule ],
+            declarations: [ SummaryComponent ],
+            providers: [
+                { provide: FnService, useValue: fs },
+                { provide: LogService, useValue: logSpy },
+                { provide: 'Window', useValue: windowMock },
+            ]
+        })
+        .compileComponents();
+        logServiceSpy = TestBed.get(LogService);
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(SummaryComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.ts b/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.ts
new file mode 100644
index 0000000..d314528
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/summary/summary.component.ts
@@ -0,0 +1,67 @@
+/*
+ * 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 { Component, OnInit } from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import {
+    LogService,
+    LoadingService,
+    FnService,
+    PanelBaseImpl
+} from 'gui2-fw-lib';
+
+/*
+ ONOS GUI -- Topology Summary Module.
+ Defines modeling of ONOS Summary Panel.
+ */
+@Component({
+    selector: 'onos-summary',
+    templateUrl: './summary.component.html',
+    styleUrls: [
+        './summary.component.css',
+        '../../topology.common.css',
+        '../../../../fw/widget/panel.css', '../../../../fw/widget/panel-theme.css'
+    ],
+    animations: [
+        trigger('summaryPanelState', [
+            state('true', style({
+                transform: 'translateX(0%)',
+                opacity: '100'
+            })),
+            state('false', style({
+                transform: 'translateX(100%)',
+                opacity: '0'
+            })),
+            transition('0 => 1', animate('100ms ease-in')),
+            transition('1 => 0', animate('100ms ease-out'))
+        ])
+    ]
+})
+export class SummaryComponent extends PanelBaseImpl implements OnInit {
+
+    constructor(
+        protected fs: FnService,
+        protected log: LogService,
+        protected ls: LoadingService,
+    ) {
+        super(fs, ls, log);
+        this.log.debug('SummaryComponent constructed');
+    }
+
+
+    ngOnInit() {
+    }
+
+}
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.css b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.css
new file mode 100644
index 0000000..9dca44c
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.css
@@ -0,0 +1,34 @@
+/*
+ * 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 -- Topology Toolbar Panel -- CSS file
+ */
+#toolbar-topo2-toolbar {
+    padding: 6px;
+}
+
+#toolbar-topo2-toolbar .tbar-row.right {
+    width: 100%;
+}
+
+#toolbar-topo2-toolbar .tbar-row-text {
+    height: 21px;
+    text-align: right;
+    padding: 8px 60px 0 0;
+    font-style: italic;
+}
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.html b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.html
new file mode 100644
index 0000000..a5e4b96
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.html
@@ -0,0 +1,132 @@
+<!--
+~ 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.
+-->
+<div id="toolbar-topo2-toolbar" class="floatpanel toolbar"
+     style="opacity: 1; left: 0px; width: 261px; top: auto; bottom: 10px;">
+    <div class="tbar-arrow">
+        <svg class="embeddedIcon" width="10" height="10" viewBox="0 0 50 50">
+            <g class="icon" transform="translate(0 50) rotate(-90)">
+                <rect width="50" height="50" rx="5"></rect>
+                <use width="50" height="50" class="glyph" xlink:href="#triangleUp"></use>
+            </g>
+        </svg>
+    </div>
+    <div class="tbar-row">
+        <div class="toggleButton selected" id="toolbar-topo2-toolbar-topo2-instance-tog">
+            <svg class="embeddedIcon" width="25" height="25" viewBox="0 0 50 50">
+                <g class="icon">
+                    <rect width="50" height="50" rx="5"></rect>
+                    <use width="50" height="50" class="glyph" xlink:href="#m_uiAttached"></use>
+                </g>
+            </svg>
+        </div>
+        <div class="toggleButton selected" id="toolbar-topo2-toolbar-topo2-summary-tog">
+            <svg class="embeddedIcon" width="25" height="25" viewBox="0 0 50 50">
+                <g class="icon">
+                    <rect width="50" height="50" rx="5"></rect>
+                    <use width="50" height="50" class="glyph" xlink:href="#m_summary"></use>
+                </g>
+            </svg>
+        </div>
+        <div class="toggleButton selected" id="toolbar-topo2-toolbar-details-tog">
+            <svg class="embeddedIcon" width="25" height="25" viewBox="0 0 50 50">
+                <g class="icon">
+                    <rect width="50" height="50" rx="5"></rect>
+                    <use width="50" height="50" class="glyph" xlink:href="#m_details"></use>
+                </g>
+            </svg>
+        </div>
+        <div class="separator"></div>
+        <div class="toggleButton" id="toolbar-topo2-toolbar-hosts-tog">
+            <svg class="embeddedIcon" width="25" height="25" viewBox="0 0 50 50">
+                <g class="icon">
+                    <rect width="50" height="50" rx="5"></rect>
+                    <use width="50" height="50" class="glyph" xlink:href="#m_endstation"></use>
+                </g>
+            </svg>
+        </div>
+        <div class="toggleButton selected" id="toolbar-topo2-toolbar-offline-tog">
+            <svg class="embeddedIcon" width="25" height="25" viewBox="0 0 50 50">
+                <g class="icon">
+                    <rect width="50" height="50" rx="5"></rect>
+                    <use width="50" height="50" class="glyph" xlink:href="#m_switch"></use>
+                </g>
+            </svg>
+        </div>
+        <div class="toggleButton selected" id="toolbar-topo2-toolbar-topo2-ports-tog">
+            <svg class="embeddedIcon" width="25" height="25" viewBox="0 0 50 50">
+                <g class="icon">
+                    <rect width="50" height="50" rx="5"></rect>
+                    <use width="50" height="50" class="glyph" xlink:href="#m_ports"></use>
+                </g>
+            </svg>
+        </div>
+        <div class="toggleButton selected" id="toolbar-topo2-toolbar-topo2-bkgrnd-tog">
+            <svg class="embeddedIcon" width="25" height="25" viewBox="0 0 50 50">
+                <g class="icon">
+                    <rect width="50" height="50" rx="5"></rect>
+                    <use width="50" height="50" class="glyph" xlink:href="#m_map"></use>
+                </g>
+            </svg>
+        </div>
+    </div>
+    <br>
+    <div class="tbar-row">
+        <div class="button" id="toolbar-topo2-toolbar-topo2-cycleLabels-btn">
+            <svg class="embeddedIcon" width="25" height="25" viewBox="0 0 50 50">
+                <g class="icon">
+                    <rect width="50" height="50" rx="5"></rect>
+                    <use width="50" height="50" class="glyph" xlink:href="#m_cycleLabels"></use>
+                </g>
+            </svg>
+        </div>
+        <div class="button" id="toolbar-topo2-toolbar-topo2-resetZoom-btn">
+            <svg class="embeddedIcon" width="25" height="25" viewBox="0 0 50 50">
+                <g class="icon">
+                    <rect width="50" height="50" rx="5"></rect>
+                    <use width="50" height="50" class="glyph" xlink:href="#m_resetZoom"></use>
+                </g>
+            </svg>
+        </div>
+        <div class="separator"></div>
+        <div class="button" id="toolbar-topo2-toolbar-topo2-eqMaster-btn">
+            <svg class="embeddedIcon" width="25" height="25" viewBox="0 0 50 50">
+                <g class="icon">
+                    <rect width="50" height="50" rx="5"></rect>
+                    <use width="50" height="50" class="glyph" xlink:href="#m_eqMaster"></use>
+                </g>
+            </svg>
+        </div>
+        <div class="separator"></div>
+        <div class="radioSet" id="toolbar-topo2-toolbar-topo-overlays">
+            <div class="radioButton selected" id="toolbar-topo2-toolbar-topo-overlays-0">
+                <svg class="embeddedIcon" width="25" height="25" viewBox="0 0 50 50">
+                    <g class="icon">
+                        <rect width="50" height="50" rx="5"></rect>
+                        <use width="50" height="50" class="glyph" xlink:href="#m_unknown"></use>
+                    </g>
+                </svg>
+            </div>
+            <div class="radioButton" id="toolbar-topo2-toolbar-topo-overlays-1">
+                <svg class="embeddedIcon" width="25" height="25" viewBox="0 0 50 50">
+                    <g class="icon">
+                        <rect width="50" height="50" rx="5"></rect>
+                        <use width="50" height="50" class="glyph" xlink:href="#m_allTraffic"></use>
+                    </g>
+                </svg>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.spec.ts
new file mode 100644
index 0000000..730809c
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.spec.ts
@@ -0,0 +1,81 @@
+/*
+ * 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { of } from 'rxjs';
+import { ToolbarComponent } from './toolbar.component';
+
+import {
+    FnService,
+    LogService
+} from 'gui2-fw-lib';
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
+
+/**
+ * ONOS GUI -- Topology View Topology Panel-- Unit Tests
+ */
+describe('ToolbarComponent', () => {
+    let fs: FnService;
+    let ar: MockActivatedRoute;
+    let windowMock: Window;
+    let logServiceSpy: jasmine.SpyObj<LogService>;
+    let component: ToolbarComponent;
+    let fixture: ComponentFixture<ToolbarComponent>;
+
+    beforeEach(async(() => {
+        const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+        ar = new MockActivatedRoute({ 'debug': 'txrx' });
+
+        windowMock = <any>{
+            location: <any>{
+                hostname: 'foo',
+                host: 'foo',
+                port: '80',
+                protocol: 'http',
+                search: { debug: 'true' },
+                href: 'ws://foo:123/onos/ui/websock/path',
+                absUrl: 'ws://foo:123/onos/ui/websock/path'
+            }
+        };
+        fs = new FnService(ar, logSpy, windowMock);
+        TestBed.configureTestingModule({
+            declarations: [ ToolbarComponent ],
+            providers: [
+                { provide: FnService, useValue: fs },
+                { provide: LogService, useValue: logSpy },
+                { provide: 'Window', useValue: windowMock },
+            ]
+        })
+        .compileComponents();
+        logServiceSpy = TestBed.get(LogService);
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ToolbarComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.ts b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.ts
new file mode 100644
index 0000000..208cafe
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.component.ts
@@ -0,0 +1,51 @@
+/*
+ * 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 { Component, OnInit } from '@angular/core';
+import {
+    LogService,
+    LoadingService,
+    FnService,
+    PanelBaseImpl
+} from 'gui2-fw-lib';
+
+/*
+ ONOS GUI -- Topology Toolbar Module.
+ Defines modeling of ONOS toolbar.
+ */
+@Component({
+    selector: 'onos-toolbar',
+    templateUrl: './toolbar.component.html',
+    styleUrls: [
+        './toolbar.component.css', './toolbar.theme.css',
+        '../../topology.common.css',
+        '../../../../fw/widget/panel.css', '../../../../fw/widget/panel-theme.css'
+    ]
+})
+export class ToolbarComponent extends PanelBaseImpl implements OnInit {
+
+    constructor(
+        protected fs: FnService,
+        protected log: LogService,
+        protected ls: LoadingService,
+    ) {
+        super(fs, ls, log);
+        this.log.debug('ToolbarComponent constructed');
+    }
+
+    ngOnInit() {
+    }
+
+}
diff --git a/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.theme.css b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.theme.css
new file mode 100644
index 0000000..fcd9157
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/panel/toolbar/toolbar.theme.css
@@ -0,0 +1,23 @@
+/*
+ * 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 -- Topology Toolbar Panel -- Theme CSS file
+ */
+.dark #toolbar-topo2-toolbar .tbar-row.right {
+    color: #666;
+}
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/topology-routing.module.ts b/web/gui2/src/main/webapp/app/view/topology/topology-routing.module.ts
new file mode 100644
index 0000000..66e17b6
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/topology-routing.module.ts
@@ -0,0 +1,36 @@
+/*
+ * 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 { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { TopologyComponent } from './topology/topology.component';
+
+const topologyRoutes: Routes = [
+    {
+        path: '',
+        component: TopologyComponent
+    },
+];
+
+/**
+ * ONOS GUI -- Topology Tabular View Feature Routing Module - allows it to be lazy loaded
+ *
+ * See https://angular.io/guide/lazy-loading-ngmodules
+ */
+@NgModule({
+    imports: [RouterModule.forChild(topologyRoutes)],
+    exports: [RouterModule]
+})
+export class TopologyRoutingModule { }
diff --git a/web/gui2/src/main/webapp/app/view/topology/topology.common.css b/web/gui2/src/main/webapp/app/view/topology/topology.common.css
new file mode 100644
index 0000000..41b7851
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/topology.common.css
@@ -0,0 +1,90 @@
+/*
+ * 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.
+ */
+
+/**
+ * ONOS GUI -- Topology Common styles -- CSS file
+ */
+.topo2-p div.header {
+    margin-bottom: 10px;
+}
+
+.topo2-p div.header div.icon {
+    vertical-align: middle;
+    display: inline-block;
+}
+.topo2-p div.body {
+    overflow-y: scroll;
+}
+
+.topo2-p div.body::-webkit-scrollbar {
+    display: none;
+}
+
+.topo2-p svg {
+    display: inline-block;
+    width: 26px;
+    height: 26px;
+}
+
+
+.topo2-p h2 {
+    padding: 0 0 0 10px;
+    margin: 0;
+    font-weight: lighter;
+    word-wrap: break-word;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.topo2-p h3 {
+    padding: 0 4px;
+    margin: 0;
+    word-wrap: break-word;
+    top: 20px;
+    left: 50px;
+}
+
+.topo2-p p,
+.topo2-p table {
+    padding: 0;
+    margin: 0;
+    width: 100%;
+}
+
+.topo2-p td {
+    word-wrap: break-word;
+}
+.topo2-p td.label {
+    font-weight: bold;
+    padding: 0 10px 0 0;
+}
+.topo2-p td.value {
+    padding: 0;
+}
+
+#topo2-p-summary  td.label {
+    width: 50%;
+}
+
+#topo2-p-detail  div.actionBtns {
+    padding-top: 6px;
+}
+
+.topo2-p hr {
+    height: 1px;
+    border: 0;
+    margin: 4px -3px;
+}
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/topology.module.ts b/web/gui2/src/main/webapp/app/view/topology/topology.module.ts
new file mode 100644
index 0000000..cc03053
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/topology.module.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 { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TopologyRoutingModule } from './topology-routing.module';
+import { TopologyComponent } from './topology/topology.component';
+import { NoDeviceConnectedSvgComponent } from './layer/nodeviceconnectedsvg/nodeviceconnectedsvg.component';
+import { LayoutComponent } from './layer/layout/layout.component';
+import { ZoomLayerSvgComponent } from './layer/zoomlayersvg/zoomlayersvg.component';
+import { InstanceComponent } from './panel/instance/instance.component';
+import { SummaryComponent } from './panel/summary/summary.component';
+import { ToolbarComponent } from './panel/toolbar/toolbar.component';
+import { DetailsComponent } from './panel/details/details.component';
+import { Gui2FwLibModule } from 'gui2-fw-lib';
+import { BackgroundSvgComponent } from './layer/backgroundsvg/backgroundsvg.component';
+import { ForceSvgComponent } from './layer/forcesvg/forcesvg.component';
+import { MapSvgComponent } from './layer/mapsvg/mapsvg.component';
+
+/**
+ * ONOS GUI -- Topology View Module
+ *
+ * Note: This has been updated from onos-gui-1.0.0 where it was called 'topo2'
+ * whereas here it is now called 'topology'. This also merges in the old 'topo'
+ */
+@NgModule({
+    imports: [
+        CommonModule,
+        TopologyRoutingModule,
+        Gui2FwLibModule
+    ],
+    declarations: [
+        TopologyComponent,
+        NoDeviceConnectedSvgComponent,
+        LayoutComponent,
+        ZoomLayerSvgComponent,
+        InstanceComponent,
+        SummaryComponent,
+        ToolbarComponent,
+        DetailsComponent,
+        BackgroundSvgComponent,
+        ForceSvgComponent,
+        MapSvgComponent
+    ]
+})
+export class TopologyModule { }
diff --git a/web/gui2/src/main/webapp/tests/app/onos.service.spec.ts b/web/gui2/src/main/webapp/app/view/topology/topology.service.spec.ts
similarity index 72%
copy from web/gui2/src/main/webapp/tests/app/onos.service.spec.ts
copy to web/gui2/src/main/webapp/app/view/topology/topology.service.spec.ts
index 01d5aef..ca8711a 100644
--- a/web/gui2/src/main/webapp/tests/app/onos.service.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/topology.service.spec.ts
@@ -14,28 +14,26 @@
  * limitations under the License.
  */
 import { TestBed, inject } from '@angular/core/testing';
-
-import { LogService } from '../../app/log.service';
-import { ConsoleLoggerService } from '../../app/consolelogger.service';
-import { OnosService } from '../../app/onos.service';
+import { LogService, ConsoleLoggerService } from 'gui2-fw-lib';
+import { TopologyService } from './topology.service';
 
 /**
- * ONOS GUI -- Onos Service - Unit Tests
+ * ONOS GUI -- Topology Service - Unit Tests
  */
-describe('OnosService', () => {
+describe('TopologyService', () => {
     let log: LogService;
 
     beforeEach(() => {
         log = new ConsoleLoggerService();
 
         TestBed.configureTestingModule({
-            providers: [OnosService,
+            providers: [TopologyService,
                 { provide: LogService, useValue: log },
             ]
         });
     });
 
-    it('should be created', inject([OnosService], (service: OnosService) => {
+    it('should be created', inject([TopologyService], (service: TopologyService) => {
         expect(service).toBeTruthy();
     }));
 });
diff --git a/web/gui2/src/main/webapp/tests/app/log.service.spec.ts b/web/gui2/src/main/webapp/app/view/topology/topology.service.ts
similarity index 60%
copy from web/gui2/src/main/webapp/tests/app/log.service.spec.ts
copy to web/gui2/src/main/webapp/app/view/topology/topology.service.ts
index 5307028..b75ed07 100644
--- a/web/gui2/src/main/webapp/tests/app/log.service.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/topology.service.ts
@@ -13,21 +13,31 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { TestBed, inject } from '@angular/core/testing';
+import { Injectable } from '@angular/core';
+import {
+    LogService,
+} from 'gui2-fw-lib';
 
-import { LogService } from '../../app/log.service';
 
 /**
- * ONOS GUI -- Log Service - Unit Tests
+ * ONOS GUI -- Topology Service Module.
  */
-describe('LogService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [LogService]
-    });
-  });
+@Injectable()
+export class TopologyService {
 
-  it('should be created', inject([LogService], (service: LogService) => {
-    expect(service).toBeTruthy();
-  }));
-});
+    constructor(
+        protected log: LogService,
+    ) {
+        this.log.debug('Initialized TopologyService');
+    }
+
+    init() {
+
+
+    }
+
+    destroy() {
+
+
+    }
+}
diff --git a/web/gui2/src/main/webapp/tests/app/log.service.spec.ts b/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.css
similarity index 60%
copy from web/gui2/src/main/webapp/tests/app/log.service.spec.ts
copy to web/gui2/src/main/webapp/app/view/topology/topology/topology.component.css
index 5307028..f1cde38 100644
--- a/web/gui2/src/main/webapp/tests/app/log.service.spec.ts
+++ b/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.css
@@ -13,21 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { TestBed, inject } from '@angular/core/testing';
 
-import { LogService } from '../../app/log.service';
 
-/**
- * ONOS GUI -- Log Service - Unit Tests
+/*
+ ONOS GUI -- Topology View (layout) -- CSS file
  */
-describe('LogService', () => {
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [LogService]
-    });
-  });
-
-  it('should be created', inject([LogService], (service: LogService) => {
-    expect(service).toBeTruthy();
-  }));
-});
+/* --- Base SVG Layer --- */
+#ov-topo2 svg {
+    /* prevents the little cut/copy/paste square that would appear on iPad */
+    -webkit-user-select: none;
+    background-color: #f4f4f4;
+}
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.html b/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.html
new file mode 100644
index 0000000..7347cb5
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.html
@@ -0,0 +1,32 @@
+<!--
+~ 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.
+-->
+<onos-flash id="topoMsgFlash" message="{{ flashMsg }}" (closed)="flashMsg = ''"></onos-flash>
+
+<onos-instance #instance></onos-instance>
+<onos-summary #summary></onos-summary>
+<onos-toolbar #toolbar></onos-toolbar>
+<onos-details #details></onos-details>
+
+<div id="ov-topo2">
+    <svg viewBox="0 0 1000 1000" id="topo2"
+        resize offset-height="56" offset-width="12"
+        notifier="notifyResize()">
+        <svg:g onos-nodeviceconnected />
+        <svg:g onos-zoomlayer />
+    </svg>
+</div>
+
+<div id="breadcrumbs"></div>
\ No newline at end of file
diff --git a/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.spec.ts b/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.spec.ts
new file mode 100644
index 0000000..5933d37
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.spec.ts
@@ -0,0 +1,101 @@
+/*
+ * 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 { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Params } from '@angular/router';
+import { of } from 'rxjs';
+import { HttpClient } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { TopologyComponent } from './topology.component';
+import { InstanceComponent } from '../panel/instance/instance.component';
+import { SummaryComponent } from '../panel/summary/summary.component';
+import { ToolbarComponent } from '../panel/toolbar/toolbar.component';
+import { DetailsComponent } from '../panel/details/details.component';
+
+import {
+    FlashComponent,
+    FnService,
+    LogService
+} from 'gui2-fw-lib';
+
+
+class MockActivatedRoute extends ActivatedRoute {
+    constructor(params: Params) {
+        super();
+        this.queryParams = of(params);
+    }
+}
+
+class MockHttpClient {}
+
+/**
+ * ONOS GUI -- Topology View -- Unit Tests
+ */
+describe('TopologyComponent', () => {
+    let fs: FnService;
+    let ar: MockActivatedRoute;
+    let windowMock: Window;
+    let logServiceSpy: jasmine.SpyObj<LogService>;
+    let component: TopologyComponent;
+    let fixture: ComponentFixture<TopologyComponent>;
+
+    beforeEach(async(() => {
+        const logSpy = jasmine.createSpyObj('LogService', ['info', 'debug', 'warn', 'error']);
+        ar = new MockActivatedRoute({ 'debug': 'txrx' });
+
+        windowMock = <any>{
+            location: <any>{
+                hostname: 'foo',
+                host: 'foo',
+                port: '80',
+                protocol: 'http',
+                search: { debug: 'true' },
+                href: 'ws://foo:123/onos/ui/websock/path',
+                absUrl: 'ws://foo:123/onos/ui/websock/path'
+            }
+        };
+        fs = new FnService(ar, logSpy, windowMock);
+
+        TestBed.configureTestingModule({
+            imports: [ BrowserAnimationsModule ],
+            declarations: [
+                TopologyComponent,
+                InstanceComponent,
+                SummaryComponent,
+                ToolbarComponent,
+                DetailsComponent,
+                FlashComponent
+            ],
+            providers: [
+                { provide: FnService, useValue: fs },
+                { provide: LogService, useValue: logSpy },
+                { provide: 'Window', useValue: windowMock },
+                { provide: HttpClient, useClass: MockHttpClient },
+            ]
+        }).compileComponents();
+        logServiceSpy = TestBed.get(LogService);
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TopologyComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
diff --git a/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.ts b/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.ts
new file mode 100644
index 0000000..5ed744b
--- /dev/null
+++ b/web/gui2/src/main/webapp/app/view/topology/topology/topology.component.ts
@@ -0,0 +1,335 @@
+/*
+ * 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 { Component, OnInit, ViewChild } from '@angular/core';
+import {
+    FnService,
+    KeysService, KeysToken,
+    LogService, PrefsService,
+    SvgUtilService, WebSocketService
+} from 'gui2-fw-lib';
+import {InstanceComponent} from '../panel/instance/instance.component';
+import {SummaryComponent} from '../panel/summary/summary.component';
+import {DetailsComponent} from '../panel/details/details.component';
+
+/**
+ * ONOS GUI Topology View
+ *
+ * This Topology View component is the top level component in a hierarchy that
+ * comprises the whole Topology View
+ *
+ * There are three main parts (panels, graphical and breadcrumbs)
+ * The panel hierarchy
+ * |-- Instances Panel (shows ONOS instances)
+ * |-- Summary Panel (summary of ONOS)
+ * |-- Toolbar Panel (the toolbar)
+ * |-- Details Panel (when a node is selected in the Force graphical view (see below))
+ *
+ * The graphical hierarchy contains
+ * Topology (this)
+ *  |-- No Devices Connected (only of there are no nodes to show)
+ *  |-- Zoom Layer (everything beneath this can be zoomed and panned)
+ *      |-- Background (container for any backgrounds - can be toggled on and off)
+ *          |-- Map
+ *      |-- Forces (all of the nodes and links laid out by a d3.force simulation)
+ *
+ * The breadcrumbs
+ * |-- Breadcrumb (in region view a way of navigating back up through regions)
+ */
+@Component({
+  selector: 'onos-topology',
+  templateUrl: './topology.component.html',
+  styleUrls: ['./topology.component.css']
+})
+export class TopologyComponent implements OnInit {
+    @ViewChild(InstanceComponent) instance: InstanceComponent;
+    @ViewChild(SummaryComponent) summary: SummaryComponent;
+    @ViewChild(DetailsComponent) details: DetailsComponent;
+
+    flashMsg: string = '';
+    prefsState = {};
+    svg: any;
+    hostLabelIdx: number = 1;
+
+    constructor(
+        protected log: LogService,
+        protected fs: FnService,
+        protected ks: KeysService,
+        protected sus: SvgUtilService,
+        protected ps: PrefsService,
+        protected wss: WebSocketService
+    ) {
+
+        this.log.debug('Topology component constructed');
+    }
+
+    ngOnInit() {
+        this.bindCommands();
+        this.log.debug('Topology component initialized');
+    }
+
+    actionMap() {
+        return {
+            L: [() => {this.cycleDeviceLabels(); }, 'Cycle device labels'],
+            B: [(token) => {this.toggleBackground(token); }, 'Toggle background'],
+            D: [(token) => {this.toggleDetails(token); }, 'Toggle details panel'],
+            I: [(token) => {this.toggleInstancePanel(token); }, 'Toggle ONOS Instance Panel'],
+            O: [() => {this.toggleSummary(); }, 'Toggle the Summary Panel'],
+            R: [() => {this.resetZoom(); }, 'Reset pan / zoom'],
+            P: [(token) => {this.togglePorts(token); }, 'Toggle Port Highlighting'],
+            E: [() => {this.equalizeMasters(); }, 'Equalize mastership roles'],
+            X: [() => {this.resetNodeLocation(); }, 'Reset Node Location'],
+            U: [() => {this.unpinNode(); }, 'Unpin node (mouse over)'],
+            H: [() => {this.toggleHosts(); }, 'Toggle host visibility'],
+            M: [() => {this.toggleOfflineDevices(); }, 'Toggle offline visibility'],
+            dot: [() => {this.toggleToolbar(); }, 'Toggle Toolbar'],
+            'shift-L': [() => {this.cycleHostLabels(); }, 'Cycle host labels'],
+
+            // -- instance color palette debug
+            9: function () {
+                this.sus.cat7().testCard(this.svg);
+            },
+
+            esc: this.handleEscape,
+
+            // TODO update after adding in Background Service
+            // topology overlay selections
+            // F1: function () { t2tbs.fnKey(0); },
+            // F2: function () { t2tbs.fnKey(1); },
+            // F3: function () { t2tbs.fnKey(2); },
+            // F4: function () { t2tbs.fnKey(3); },
+            // F5: function () { t2tbs.fnKey(4); },
+            //
+            // _keyListener: t2tbs.keyListener.bind(t2tbs),
+
+            _helpFormat: [
+                ['I', 'O', 'D', 'H', 'M', 'P', 'dash', 'B'],
+                ['X', 'Z', 'N', 'L', 'shift-L', 'U', 'R', 'E', 'dot'],
+                [], // this column reserved for overlay actions
+            ],
+        };
+    }
+
+
+    bindCommands(additional?: any) {
+
+        const am = this.actionMap();
+        const add = this.fs.isO(additional);
+
+        // TODO: Reimplement when we have a use case
+        // if (add) {
+        //     _.each(add, function (value, key) {
+        //         // filter out meta properties (e.g. _keyOrder)
+        //         if (!(_.startsWith(key, '_'))) {
+        //             // don't allow re-definition of existing key bindings
+        //             if (am[key]) {
+        //                 this.log.warn('keybind: ' + key + ' already exists');
+        //             } else {
+        //                 am[key] = [value.cb, value.tt];
+        //             }
+        //         }
+        //     });
+        // }
+
+        this.ks.keyBindings(am);
+
+        this.ks.gestureNotes([
+            ['click', 'Select the item and show details'],
+            ['shift-click', 'Toggle selection state'],
+            ['drag', 'Reposition (and pin) device / host'],
+            ['cmd-scroll', 'Zoom in / out'],
+            ['cmd-drag', 'Pan'],
+        ]);
+    }
+
+    handleEscape() {
+
+        if (false) {
+            // TODO: Cancel show mastership
+            // TODO: Cancel Active overlay
+            // TODO: Reinstate with components
+        } else {
+            this.log.debug('Handling escape');
+            // } else if (t2rs.deselectAllNodes()) {
+            //     // else if we have node selections, deselect them all
+            //     // (work already done)
+            // } else if (t2rs.deselectLink()) {
+            //     // else if we have a link selection, deselect it
+            //     // (work already done)
+            // } else if (t2is.isVisible()) {
+            //     // If the instance panel is visible, close it
+            //     t2is.toggle();
+            // } else if (t2sp.isVisible()) {
+            //     // If the summary panel is visible, close it
+            //     t2sp.toggle();
+        }
+    }
+
+
+
+    updatePrefsState(what, b) {
+        this.prefsState[what] = b ? 1 : 0;
+        this.ps.setPrefs('topo2_prefs', this.prefsState);
+    }
+
+    deviceLabelFlashMessage(index) {
+        switch (index) {
+            case 0: return 'Hide device labels';
+            case 1: return 'Show friendly device labels';
+            case 2: return 'Show device ID labels';
+        }
+    }
+
+    hostLabelFlashMessage(index) {
+        switch (index) {
+            case 0: return 'Hide host labels';
+            case 1: return 'Show friendly host labels';
+            case 2: return 'Show host IP labels';
+            case 3: return 'Show host MAC Address labels';
+        }
+    }
+
+    protected cycleDeviceLabels() {
+        this.log.debug('Cycling device labels');
+        // TODO: Reinstate with components
+        // let deviceLabelIndex = t2ps.get('dlbls') + 1;
+        // let newDeviceLabelIndex = deviceLabelIndex % 3;
+        //
+        // t2ps.set('dlbls', newDeviceLabelIndex);
+        // t2fs.updateNodes();
+        // flash.flash(deviceLabelFlashMessage(newDeviceLabelIndex));
+    }
+
+    protected cycleHostLabels() {
+        const hostLabelIndex = this.hostLabelIdx + 1;
+        this.hostLabelIdx = hostLabelIndex % 4;
+        this.flashMsg = this.hostLabelFlashMessage(this.hostLabelIdx);
+        this.log.debug('Cycling host labels');
+        // TODO: Reinstate with components
+        // t2ps.set('hlbls', newHostLabelIndex);
+        // t2fs.updateNodes();
+    }
+
+    protected toggleBackground(token: KeysToken) {
+        this.flashMsg = 'Toggling background';
+        this.log.debug('Toggling background', token);
+        // TODO: Reinstate with components
+        // t2bgs.toggle(x);
+    }
+
+    protected toggleDetails(token: KeysToken) {
+        this.flashMsg = 'Toggling details';
+        this.details.togglePanel(() => {});
+        this.log.debug('Toggling details', token);
+    }
+
+    protected toggleInstancePanel(token: KeysToken) {
+        this.flashMsg = 'Toggling instances';
+        this.instance.togglePanel(() => {});
+        this.log.debug('Toggling instances', token);
+        // TODO: Reinstate with components
+        // this.updatePrefsState('insts', t2is.toggle(x));
+    }
+
+    protected toggleSummary() {
+        this.flashMsg = 'Toggling summary';
+        this.summary.togglePanel(() => {});
+    }
+
+    protected resetZoom() {
+        this.log.debug('resetting zoom');
+        // TODO: Reinstate with components
+        // t2bgs.resetZoom();
+        // flash.flash('Pan and zoom reset');
+    }
+
+    protected togglePorts(token: KeysToken) {
+        this.log.debug('Toggling ports');
+        // TODO: Reinstate with components
+        // this.updatePrefsState('porthl', t2vs.togglePortHighlights(x));
+        // t2fs.updateLinks();
+    }
+
+    protected equalizeMasters() {
+        this.wss.sendEvent('equalizeMasters', null);
+
+        this.log.debug('equalizing masters');
+        // TODO: Reinstate with components
+        // flash.flash('Equalizing master roles');
+    }
+
+    protected resetNodeLocation() {
+        this.log.debug('resetting node location');
+        // TODO: Reinstate with components
+        // t2fs.resetNodeLocation();
+        // flash.flash('Reset node locations');
+    }
+
+    protected unpinNode() {
+        this.log.debug('unpinning node');
+        // TODO: Reinstate with components
+        // t2fs.unpin();
+        // flash.flash('Unpin node');
+    }
+
+    protected toggleToolbar() {
+        this.log.debug('toggling toolbar');
+        // TODO: Reinstate with components
+        // t2tbs.toggle();
+    }
+
+    protected actionedFlashed(action, message) {
+        this.log.debug('action flashed');
+        // TODO: Reinstate with components
+        // this.flash.flash(action + ' ' + message);
+    }
+
+    protected toggleHosts() {
+        // this.flashMsg = on ? 'Show': 'Hide', 'Hosts';
+        this.log.debug('toggling hosts');
+        // TODO: Reinstate with components
+        // let on = t2rs.toggleHosts();
+        // this.actionedFlashed(on ? 'Show': 'Hide', 'Hosts');
+    }
+
+    protected toggleOfflineDevices() {
+        this.log.debug('toggling offline devices');
+        // TODO: Reinstate with components
+        // let on = t2rs.toggleOfflineDevices();
+        // this.actionedFlashed(on ? 'Show': 'Hide', 'offline devices');
+    }
+
+    protected notValid(what) {
+        this.log.warn('topo.js getActionEntry(): Not a valid ' + what);
+    }
+
+    getActionEntry(key) {
+        let entry;
+
+        if (!key) {
+            this.notValid('key');
+            return null;
+        }
+
+        entry = this.actionMap()[key];
+
+        if (!entry) {
+            this.notValid('actionMap (' + key + ') entry');
+            return null;
+        }
+        return this.fs.isA(entry) || [entry, ''];
+    }
+
+}
diff --git a/web/gui2/src/main/webapp/tests/app/fw/layer/editabletext.service.spec.ts b/web/gui2/src/main/webapp/tests/app/fw/layer/editabletext.service.spec.ts
deleted file mode 100644
index 05663c7..0000000
--- a/web/gui2/src/main/webapp/tests/app/fw/layer/editabletext.service.spec.ts
+++ /dev/null
@@ -1,49 +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 { TestBed, inject } from '@angular/core/testing';
-
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { EditableTextService } from '../../../../app/fw/layer/editabletext.service';
-import { KeyService } from '../../../../app/fw/util/key.service';
-import { WebSocketService } from '../../../../app/fw/remote/websocket.service';
-
-class MockKeyService {}
-
-class MockWebSocketService {}
-
-/**
- * ONOS GUI -- Layer -- Editable Text Service - Unit Tests
- */
-describe('EditableTextService', () => {
-    let log: LogService;
-
-    beforeEach(() => {
-        log = new ConsoleLoggerService();
-
-        TestBed.configureTestingModule({
-            providers: [EditableTextService,
-                { provide: LogService, useValue: log },
-                { provide: KeyService, useClass: MockKeyService },
-                { provide: WebSocketService, useClass: MockWebSocketService },
-            ]
-        });
-    });
-
-    it('should be created', inject([EditableTextService], (service: EditableTextService) => {
-        expect(service).toBeTruthy();
-    }));
-});
diff --git a/web/gui2/src/main/webapp/tests/app/fw/layer/quickhelp.service.spec.ts b/web/gui2/src/main/webapp/tests/app/fw/layer/quickhelp.service.spec.ts
deleted file mode 100644
index fa8f8ea..0000000
--- a/web/gui2/src/main/webapp/tests/app/fw/layer/quickhelp.service.spec.ts
+++ /dev/null
@@ -1,57 +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 { TestBed, inject } from '@angular/core/testing';
-
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { QuickHelpService } from '../../../../app/fw/layer/quickhelp.service';
-import { FnService } from '../../../../app/fw/util/fn.service';
-import { LionService } from '../../../../app/fw/util/lion.service';
-import { LoadingService } from '../../../../app/fw/layer/loading.service';
-import { SvgUtilService } from '../../../../app/fw/svg/svgutil.service';
-
-class MockFnService {}
-
-class MockLionService {}
-
-class MockLoadingService {}
-
-class MockSvgUtilService {}
-
-/**
- * ONOS GUI -- Layer -- Quick Help Service - Unit Tests
- */
-describe('QuickHelpService', () => {
-    let log: LogService;
-
-    beforeEach(() => {
-        log = new ConsoleLoggerService();
-
-        TestBed.configureTestingModule({
-            providers: [QuickHelpService,
-                { provide: LogService, useValue: log },
-                { provide: FnService, useClass: MockFnService },
-                { provide: LionService, useClass: MockLionService },
-                { provide: LoadingService, useClass: MockLoadingService },
-                { provide: SvgUtilService, useClass: MockSvgUtilService },
-            ]
-        });
-    });
-
-    it('should be created', inject([QuickHelpService], (service: QuickHelpService) => {
-        expect(service).toBeTruthy();
-    }));
-});
diff --git a/web/gui2/src/main/webapp/tests/app/fw/remote/rest.service.spec.ts b/web/gui2/src/main/webapp/tests/app/fw/remote/rest.service.spec.ts
deleted file mode 100644
index 45576f6..0000000
--- a/web/gui2/src/main/webapp/tests/app/fw/remote/rest.service.spec.ts
+++ /dev/null
@@ -1,49 +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 { TestBed, inject } from '@angular/core/testing';
-
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { RestService } from '../../../../app/fw/remote/rest.service';
-import { FnService } from '../../../../app/fw/util/fn.service';
-import { UrlFnService } from '../../../../app/fw/remote/urlfn.service';
-
-class MockFnService {}
-
-class MockUrlFnService {}
-
-/**
- * ONOS GUI -- Remote -- REST Service - Unit Tests
- */
-describe('RestService', () => {
-    let log: LogService;
-
-    beforeEach(() => {
-        log = new ConsoleLoggerService();
-
-        TestBed.configureTestingModule({
-            providers: [RestService,
-                { provide: FnService, useClass: MockFnService },
-                { provide: LogService, useValue: log },
-                { provide: UrlFnService, useClass: MockUrlFnService },
-            ]
-        });
-    });
-
-    it('should be created', inject([RestService], (service: RestService) => {
-        expect(service).toBeTruthy();
-    }));
-});
diff --git a/web/gui2/src/main/webapp/tests/app/fw/svg/geodata.service.spec.ts b/web/gui2/src/main/webapp/tests/app/fw/svg/geodata.service.spec.ts
deleted file mode 100644
index 3057897..0000000
--- a/web/gui2/src/main/webapp/tests/app/fw/svg/geodata.service.spec.ts
+++ /dev/null
@@ -1,45 +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 { TestBed, inject } from '@angular/core/testing';
-
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { GeoDataService } from '../../../../app/fw/svg/geodata.service';
-import { FnService } from '../../../../app/fw/util/fn.service';
-
-class MockFnService {}
-
-/**
- * ONOS GUI -- SVG -- GeoData Service - Unit Tests
- */
-describe('GeoDataService', () => {
-    let log: LogService;
-
-    beforeEach(() => {
-        log = new ConsoleLoggerService();
-
-        TestBed.configureTestingModule({
-            providers: [GeoDataService,
-                { provide: FnService, useClass: MockFnService },
-                { provide: LogService, useValue: log },
-            ]
-        });
-    });
-
-    it('should be created', inject([GeoDataService], (service: GeoDataService) => {
-        expect(service).toBeTruthy();
-    }));
-});
diff --git a/web/gui2/src/main/webapp/tests/app/fw/svg/map.service.spec.ts b/web/gui2/src/main/webapp/tests/app/fw/svg/map.service.spec.ts
deleted file mode 100644
index 347db99..0000000
--- a/web/gui2/src/main/webapp/tests/app/fw/svg/map.service.spec.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- *  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.
- */
-import { TestBed, inject } from '@angular/core/testing';
-
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { MapService } from '../../../../app/fw/svg/map.service';
-import { GlyphDataService } from '../../../../app/fw/svg/glyphdata.service';
-
-class MockGlyphDataService {}
-
-/**
- * ONOS GUI -- SVG -- Map Service - Unit Tests
- */
-describe('MapService', () => {
-    let log: LogService;
-
-    beforeEach(() => {
-        log = new ConsoleLoggerService();
-
-        TestBed.configureTestingModule({
-            providers: [MapService,
-                { provide: LogService, useValue: log },
-                { provide: GlyphDataService, useClass: MockGlyphDataService },
-            ]
-        });
-    });
-
-    it('should be created', inject([MapService], (service: MapService) => {
-        expect(service).toBeTruthy();
-    }));
-});
diff --git a/web/gui2/src/main/webapp/tests/app/fw/svg/sprite.service.spec.ts b/web/gui2/src/main/webapp/tests/app/fw/svg/sprite.service.spec.ts
deleted file mode 100644
index 9c352c9..0000000
--- a/web/gui2/src/main/webapp/tests/app/fw/svg/sprite.service.spec.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- *  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.
- */
-import { TestBed, inject } from '@angular/core/testing';
-
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { SpriteService } from '../../../../app/fw/svg/sprite.service';
-
-/**
- * ONOS GUI -- SVG -- Sprite Service - Unit Tests
- */
-describe('SpriteService', () => {
-    let log: LogService;
-
-    beforeEach(() => {
-        log = new ConsoleLoggerService();
-
-        TestBed.configureTestingModule({
-            providers: [SpriteService,
-                { provide: LogService, useValue: log },
-            ]
-        });
-    });
-
-    it('should be created', inject([SpriteService], (service: SpriteService) => {
-        expect(service).toBeTruthy();
-    }));
-});
diff --git a/web/gui2/src/main/webapp/tests/app/fw/svg/spritedata.service.spec.ts b/web/gui2/src/main/webapp/tests/app/fw/svg/spritedata.service.spec.ts
deleted file mode 100644
index 0e20c85..0000000
--- a/web/gui2/src/main/webapp/tests/app/fw/svg/spritedata.service.spec.ts
+++ /dev/null
@@ -1,41 +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 { TestBed, inject } from '@angular/core/testing';
-
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { SpriteDataService } from '../../../../app/fw/svg/spritedata.service';
-
-/**
- * ONOS GUI -- SVG -- Sprite Data Service - Unit Tests
- */
-describe('SpriteDataService', () => {
-    let log: LogService;
-
-    beforeEach(() => {
-        log = new ConsoleLoggerService();
-
-        TestBed.configureTestingModule({
-            providers: [SpriteDataService,
-                { provide: LogService, useValue: log },
-            ]
-        });
-    });
-
-    it('should be created', inject([SpriteDataService], (service: SpriteDataService) => {
-        expect(service).toBeTruthy();
-    }));
-});
diff --git a/web/gui2/src/main/webapp/tests/app/fw/svg/zoom.service.spec.ts b/web/gui2/src/main/webapp/tests/app/fw/svg/zoom.service.spec.ts
deleted file mode 100644
index 360ff41..0000000
--- a/web/gui2/src/main/webapp/tests/app/fw/svg/zoom.service.spec.ts
+++ /dev/null
@@ -1,41 +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 { TestBed, inject } from '@angular/core/testing';
-
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { ZoomService } from '../../../../app/fw/svg/zoom.service';
-
-/**
- * ONOS GUI -- SVG -- Zoom Service - Unit Tests
- */
-describe('ZoomService', () => {
-    let log: LogService;
-
-    beforeEach(() => {
-        log = new ConsoleLoggerService();
-
-        TestBed.configureTestingModule({
-            providers: [ZoomService,
-                { provide: LogService, useValue: log },
-            ]
-        });
-    });
-
-    it('should be created', inject([ZoomService], (service: ZoomService) => {
-        expect(service).toBeTruthy();
-    }));
-});
diff --git a/web/gui2/src/main/webapp/tests/app/fw/util/ee.service.spec.ts b/web/gui2/src/main/webapp/tests/app/fw/util/ee.service.spec.ts
deleted file mode 100644
index 90c00d0..0000000
--- a/web/gui2/src/main/webapp/tests/app/fw/util/ee.service.spec.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- *  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.
- */
-import { TestBed, inject } from '@angular/core/testing';
-
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { EeService } from '../../../../app/fw/util/ee.service';
-
-/**
- * ONOS GUI -- Util -- EE functions - Unit Tests
- */
-describe('EeService', () => {
-    let log: LogService;
-
-    beforeEach(() => {
-        log = new ConsoleLoggerService();
-
-        TestBed.configureTestingModule({
-            providers: [EeService,
-                { provide: LogService, useValue: log },
-            ]
-        });
-    });
-
-    it('should be created', inject([EeService], (service: EeService) => {
-        expect(service).toBeTruthy();
-    }));
-});
diff --git a/web/gui2/src/main/webapp/tests/app/fw/util/key.service.spec.ts b/web/gui2/src/main/webapp/tests/app/fw/util/key.service.spec.ts
deleted file mode 100644
index 7ceadb8..0000000
--- a/web/gui2/src/main/webapp/tests/app/fw/util/key.service.spec.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * Copyright 2014-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 '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { KeyService } from '../../../../app/fw/util/key.service';
-import { FnService } from '../../../../app/fw/util/fn.service';
-
-class MockFnService {}
-
-/**
- * ONOS GUI -- Key Handler Service - Unit Tests
- */
-describe('KeyService', () => {
-    let log: LogService;
-
-    beforeEach(() => {
-        log = new ConsoleLoggerService();
-
-        TestBed.configureTestingModule({
-            providers: [KeyService,
-                { provide: LogService, useValue: log },
-                { provide: FnService, useClass: MockFnService },
-            ]
-        });
-    });
-
-    it('should be created', inject([KeyService], (service: KeyService) => {
-        expect(service).toBeTruthy();
-    }));
-});
diff --git a/web/gui2/src/main/webapp/tests/app/fw/util/random.service.spec.ts b/web/gui2/src/main/webapp/tests/app/fw/util/random.service.spec.ts
deleted file mode 100644
index 726fc92..0000000
--- a/web/gui2/src/main/webapp/tests/app/fw/util/random.service.spec.ts
+++ /dev/null
@@ -1,45 +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 { TestBed, inject } from '@angular/core/testing';
-
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { RandomService } from '../../../../app/fw/util/random.service';
-import { FnService } from '../../../../app/fw/util/fn.service';
-
-class MockFnService {}
-
-/**
- * ONOS GUI -- Random -- Encapsulated randomness - Unit Tests
- */
-describe('RandomService', () => {
-    let log: LogService;
-
-    beforeEach(() => {
-        log = new ConsoleLoggerService();
-
-        TestBed.configureTestingModule({
-            providers: [RandomService,
-                { provide: LogService, useValue: log },
-                { provide: FnService, useClass: MockFnService },
-            ]
-        });
-    });
-
-    it('should be created', inject([RandomService], (service: RandomService) => {
-        expect(service).toBeTruthy();
-    }));
-});
diff --git a/web/gui2/src/main/webapp/tests/app/fw/widget/button.service.spec.ts b/web/gui2/src/main/webapp/tests/app/fw/widget/button.service.spec.ts
deleted file mode 100644
index c3e501d..0000000
--- a/web/gui2/src/main/webapp/tests/app/fw/widget/button.service.spec.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-/*
- * 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.
- */
-import { TestBed, inject } from '@angular/core/testing';
-
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { ButtonService } from '../../../../app/fw/widget/button.service';
-import { FnService } from '../../../../app/fw/util/fn.service';
-import { IconService } from '../../../../app/fw/svg/icon.service';
-
-class MockIconService {}
-
-class MockFnService {}
-
-/**
- * ONOS GUI -- Widget -- Button Service - Unit Tests
- */
-describe('ButtonService', () => {
-    let log: LogService;
-
-    beforeEach(() => {
-        log = new ConsoleLoggerService();
-
-        TestBed.configureTestingModule({
-            providers: [ButtonService,
-                { provide: LogService, useValue: log },
-                { provide: IconService, useClass: MockIconService },
-                { provide: FnService, useClass: MockFnService },
-            ]
-        });
-    });
-
-    it('should be created', inject([ButtonService], (service: ButtonService) => {
-        expect(service).toBeTruthy();
-    }));
-});
diff --git a/web/gui2/src/main/webapp/tests/app/fw/widget/chartbuilder.service.spec.ts b/web/gui2/src/main/webapp/tests/app/fw/widget/chartbuilder.service.spec.ts
deleted file mode 100644
index dbb806d..0000000
--- a/web/gui2/src/main/webapp/tests/app/fw/widget/chartbuilder.service.spec.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * 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.
- */
-import { TestBed, inject } from '@angular/core/testing';
-
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { ChartBuilderService } from '../../../../app/fw/widget/chartbuilder.service';
-import { LoadingService } from '../../../../app/fw/layer/loading.service';
-import { FnService } from '../../../../app/fw/util/fn.service';
-import { WebSocketService } from '../../../../app/fw/remote/websocket.service';
-
-class MockFnService {}
-
-class MockLoadingService {}
-
-class MockWebSocketService {}
-
-/**
- * ONOS GUI -- Widget -- Chart Builder Service - Unit Tests
- */
-describe('ChartBuilderService', () => {
-    let log: LogService;
-
-    beforeEach(() => {
-        log = new ConsoleLoggerService();
-
-        TestBed.configureTestingModule({
-            providers: [ChartBuilderService,
-                { provide: LogService, useValue: log },
-                { provide: FnService, useClass: MockFnService },
-                { provide: LoadingService, useClass: MockLoadingService },
-                { provide: WebSocketService, useClass: MockWebSocketService },
-            ]
-        });
-    });
-
-    it('should be created', inject([ChartBuilderService], (service: ChartBuilderService) => {
-        expect(service).toBeTruthy();
-    }));
-});
diff --git a/web/gui2/src/main/webapp/tests/app/fw/widget/list.service.spec.ts b/web/gui2/src/main/webapp/tests/app/fw/widget/list.service.spec.ts
deleted file mode 100644
index 7380270..0000000
--- a/web/gui2/src/main/webapp/tests/app/fw/widget/list.service.spec.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * 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.
- */
-import { TestBed, inject } from '@angular/core/testing';
-
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { ListService } from '../../../../app/fw/widget/list.service';
-
-/**
- * ONOS GUI -- Widget -- List Service - Unit Tests
- */
-describe('ListService', () => {
-    let log: LogService;
-
-    beforeEach(() => {
-        log = new ConsoleLoggerService();
-
-        TestBed.configureTestingModule({
-            providers: [ListService,
-                { provide: LogService, useValue: log },
-            ]
-        });
-    });
-
-    it('should be created', inject([ListService], (service: ListService) => {
-        expect(service).toBeTruthy();
-    }));
-});
diff --git a/web/gui2/src/main/webapp/tests/app/fw/widget/sortableheader.directive.spec.ts b/web/gui2/src/main/webapp/tests/app/fw/widget/sortableheader.directive.spec.ts
deleted file mode 100644
index 993430b..0000000
--- a/web/gui2/src/main/webapp/tests/app/fw/widget/sortableheader.directive.spec.ts
+++ /dev/null
@@ -1,57 +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 { TestBed, inject } from '@angular/core/testing';
-
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { SortableHeaderDirective } from '../../../../app/fw/widget/sortableheader.directive';
-import { IconService } from '../../../../app/fw/svg/icon.service';
-import { GlyphService } from '../../../../app/fw/svg/glyph.service';
-import { FnService } from '../../../../app/fw/util/fn.service';
-
-class MockFnService {}
-
-class MockGlyphService {}
-
-class MockIconService {}
-
-/**
- * ONOS GUI -- Widget -- Table Sortable Header Directive - Unit Tests
- */
-describe('SortableHeaderDirective', () => {
-    let log: LogService;
-
-    beforeEach(() => {
-        log = new ConsoleLoggerService();
-
-        TestBed.configureTestingModule({
-            providers: [ SortableHeaderDirective,
-                { provide: FnService, useClass: MockFnService },
-                { provide: LogService, useValue: log },
-                { provide: GlyphService, useClass: MockGlyphService },
-                { provide: IconService, useClass: MockIconService },
-            ]
-        });
-    });
-
-    afterEach(() => {
-        log = null;
-    });
-
-    it('should create an instance', inject([SortableHeaderDirective], (directive: SortableHeaderDirective) => {
-        expect(directive).toBeTruthy();
-    }));
-});
diff --git a/web/gui2/src/main/webapp/tests/app/fw/widget/tableresize.directive.spec.ts b/web/gui2/src/main/webapp/tests/app/fw/widget/tableresize.directive.spec.ts
deleted file mode 100644
index 3fa6fe0..0000000
--- a/web/gui2/src/main/webapp/tests/app/fw/widget/tableresize.directive.spec.ts
+++ /dev/null
@@ -1,53 +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 { TestBed, inject } from '@angular/core/testing';
-
-import { TableResizeDirective } from '../../../../app/fw/widget/tableresize.directive';
-import { LogService } from '../../../../app/log.service';
-import { ConsoleLoggerService } from '../../../../app/consolelogger.service';
-import { FnService } from '../../../../app/fw/util/fn.service';
-import { MastService } from '../../../../app/fw/mast/mast.service';
-
-class MockFnService {}
-
-class MockMastService {}
-
-/**
- * ONOS GUI -- Widget -- Table Resize Directive - Unit Tests
- */
-describe('TableResizeDirective', () => {
-    let log: LogService;
-
-    beforeEach(() => {
-        log = new ConsoleLoggerService();
-
-        TestBed.configureTestingModule({
-            providers: [ TableResizeDirective,
-                { provide: FnService, useClass: MockFnService },
-                { provide: LogService, useValue: log },
-                { provide: MastService, useClass: MockMastService },
-            ]
-        });
-    });
-
-    afterEach(() => {
-        log = null;
-    });
-
-    it('should create an instance', inject([TableResizeDirective], (directive: TableResizeDirective) => {
-        expect(directive).toBeTruthy();
-    }));
-});
diff --git a/web/gui2/src/main/webapp/tests/app/onos.component.spec.ts b/web/gui2/src/main/webapp/tests/app/onos.component.spec.ts
deleted file mode 100644
index c03f680..0000000
--- a/web/gui2/src/main/webapp/tests/app/onos.component.spec.ts
+++ /dev/null
@@ -1,151 +0,0 @@
-/*
- * 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 { TestBed, async } from '@angular/core/testing';
-import { RouterModule, RouterOutlet, ChildrenOutletContexts, ActivatedRoute, Params } from '@angular/router';
-import { of } from 'rxjs';
-
-import { LogService } from '../../app/log.service';
-import { ConsoleLoggerService } from '../../app/consolelogger.service';
-
-import { IconComponent } from '../../app/fw/svg/icon/icon.component';
-import { MastComponent } from '../../app/fw/mast/mast/mast.component';
-import { NavComponent } from '../../app/fw/nav/nav/nav.component';
-import { OnosComponent } from '../../app/onos.component';
-import { VeilComponent } from '../../app/fw/layer/veil/veil.component';
-
-import { DialogService } from '../../app/fw/layer/dialog.service';
-import { EeService } from '../../app/fw/util/ee.service';
-import { FnService } from '../../app/fw/util/fn.service';
-import { GlyphService } from '../../app/fw/svg/glyph.service';
-import { IconService } from '../../app/fw/svg/icon.service';
-import { KeyService } from '../../app/fw/util/key.service';
-import { LionService } from '../../app/fw/util/lion.service';
-import { NavService } from '../../app/fw/nav/nav.service';
-import { OnosService } from '../../app/onos.service';
-import { QuickHelpService } from '../../app/fw/layer/quickhelp.service';
-import { SvgUtilService } from '../../app/fw/svg/svgutil.service';
-import { ThemeService } from '../../app/fw/util/theme.service';
-import { SpriteService } from '../../app/fw/svg/sprite.service';
-import { WebSocketService, WsOptions } from '../../app/fw/remote/websocket.service';
-
-class MockActivatedRoute extends ActivatedRoute {
-    constructor(params: Params) {
-        super();
-        this.queryParams = of(params);
-    }
-}
-
-class MockDialogService {}
-
-class MockEeService {}
-
-class MockGlyphService {}
-
-class MockIconService {}
-
-class MockKeyService {}
-
-class MockLionService {}
-
-class MockNavService {}
-
-class MockOnosService {}
-
-class MockQuickHelpService {}
-
-class MockSpriteService {}
-
-class MockThemeService {}
-
-class MockVeilComponent {}
-
-class MockWebSocketService {
-    createWebSocket() {}
-    isConnected() { return false; }
-}
-
-/**
- * ONOS GUI -- Onos Component - Unit Tests
- */
-describe('OnosComponent', () => {
-    let log: LogService;
-    let fs: FnService;
-    let ar: MockActivatedRoute;
-    let windowMock: Window;
-    let fixture;
-    let app;
-
-    beforeEach(async(() => {
-        log = new ConsoleLoggerService();
-        ar = new MockActivatedRoute({'debug': 'TestService'});
-
-        windowMock = <any>{
-            location: <any> {
-                hostname: '',
-                host: '',
-                port: '',
-                protocol: '',
-                search: { debug: 'true'},
-                href: ''
-            },
-            innerHeight: 240,
-            innerWidth: 320
-        };
-        fs = new FnService(ar, log, windowMock);
-
-        TestBed.configureTestingModule({
-            declarations: [
-                IconComponent,
-                MastComponent,
-                NavComponent,
-                OnosComponent,
-                VeilComponent,
-                RouterOutlet
-            ],
-            providers: [
-                { provide: ChildrenOutletContexts, useClass: ChildrenOutletContexts },
-                { provide: DialogService, useClass: MockDialogService },
-                { provide: EeService, useClass: MockEeService },
-                { provide: FnService, useValue: fs },
-                { provide: GlyphService, useClass: MockGlyphService },
-                { provide: IconService, useClass: MockIconService },
-                { provide: KeyService, useClass: MockKeyService },
-                { provide: LionService, useClass: MockLionService },
-                { provide: LogService, useValue: log },
-                { provide: NavService, useClass: MockNavService },
-                { provide: OnosService, useClass: MockOnosService },
-                { provide: QuickHelpService, useClass: MockQuickHelpService },
-                { provide: SpriteService, useClass: MockSpriteService },
-                { provide: ThemeService, useClass: MockThemeService },
-                { provide: WebSocketService, useClass: MockWebSocketService },
-                { provide: Window, useFactory: (() => windowMock ) },
-            ]
-        }).compileComponents();
-
-        fixture = TestBed.createComponent(OnosComponent);
-        app = fixture.componentInstance;
-    }));
-
-    it('should create the app', async(() => {
-        expect(app).toBeTruthy();
-    }));
-
-//    it(`should have as title 'onos'`, async(() => {
-//        const fixture = TestBed.createComponent(OnosComponent);
-//        const app = fixture.componentInstance;
-//        expect(app.title).toEqual('onos');
-//    }));
-});