GUI2 added in details panel, updated docs

Change-Id: I49a874deeb4de1082f190ea5d0d985c986a978f8
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
index 9233713..17fba06 100644
--- 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
@@ -16,6 +16,6 @@
 <svg:g xmlns:svg="http://www.w3.org/2000/svg" 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:text x="120" y="80">{{lionFn('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
index a467a3d..891a3fb 100644
--- 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
@@ -26,7 +26,7 @@
     UrlFnService,
     TableFilterPipe,
     IconComponent,
-    WebSocketService
+    WebSocketService, SvgUtilService, PrefsService
 } from 'gui2-fw-lib';
 import { of } from 'rxjs';
 
@@ -37,11 +37,6 @@
     }
 }
 
-class MockIconService {
-    classes = 'active-close';
-    loadIconDef() { }
-}
-
 class MockWebSocketService {
     createWebSocket() { }
     isConnected() { return false; }
@@ -49,6 +44,15 @@
     bindHandlers() { }
 }
 
+class MockSvgUtilService {
+    translate() {}
+    scale() {}
+}
+
+class MockPrefsService {
+}
+
+
 /**
  * ONOS GUI -- Topology NoDevicesConnected -- Unit Tests
  */
@@ -73,9 +77,10 @@
             declarations: [ NoDeviceConnectedSvgComponent ],
             providers: [
                 { provide: FnService, useValue: fs },
-                { provide: IconService, useClass: MockIconService },
                 { provide: LogService, useValue: logSpy },
+                { provide: SvgUtilService, useClass: MockSvgUtilService },
                 { provide: WebSocketService, useClass: MockWebSocketService },
+                { provide: PrefsService, useClass: MockPrefsService },
                 { provide: 'Window', useValue: windowMock },
             ]
         }).compileComponents();
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
index 2ff9ed1..a245fad 100644
--- 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
@@ -20,7 +20,7 @@
     LogService,
     PrefsService,
     IconService,
-    SvgUtilService
+    SvgUtilService, LionService
 } from 'gui2-fw-lib';
 
 /**
@@ -37,16 +37,24 @@
   styleUrls: ['./nodeviceconnectedsvg.component.css']
 })
 export class NoDeviceConnectedSvgComponent extends ViewControllerImpl implements OnInit {
+    lionFn; // Function
 
     constructor(
         protected fs: FnService,
         protected log: LogService,
         protected ps: PrefsService,
-        protected is: IconService,
-        protected sus: SvgUtilService
+        protected sus: SvgUtilService,
+        private lion: LionService
     ) {
         super(fs, log, ps);
-        this.is.loadIconDef('bird');
+
+        if (this.lion.ubercache.length === 0) {
+            this.lionFn = this.dummyLion;
+            this.lion.loadCbs.set('topo-nodevices', () => this.doLion());
+        } else {
+            this.doLion();
+        }
+
         this.log.debug('NoDeviceConnectedSvgComponent constructed');
     }
 
@@ -64,4 +72,19 @@
         return this.sus.translate([repositionBox.x, repositionBox.y]) + '' + this.sus.scale(scale, scale);
     }
 
+    /**
+     * Read the LION bundle for Details panel and set up the lionFn
+     */
+    doLion() {
+        this.lionFn = this.lion.bundle('core.view.Topo');
+
+    }
+
+    /**
+     * A dummy implementation of the lionFn until the response is received and the LION
+     * bundle is received from the WebSocket
+     */
+    dummyLion(key: string): string {
+        return '%' + key + '%';
+    }
 }