GUI2 implementation of device/flow/port/group/meter/host/link/tunnel view

Review comments incorporated.

Change-Id: I45dd6570961cc3e0f4ffddb7acbf02cd7d860de5
diff --git a/web/gui2/src/main/webapp/app/fw/widget/detailspanel.base.ts b/web/gui2/src/main/webapp/app/fw/widget/detailspanel.base.ts
index d7cf7b8..59f85c5 100644
--- a/web/gui2/src/main/webapp/app/fw/widget/detailspanel.base.ts
+++ b/web/gui2/src/main/webapp/app/fw/widget/detailspanel.base.ts
@@ -19,6 +19,7 @@
 import { WebSocketService } from '../remote/websocket.service';
 
 import { PanelBaseImpl } from './panel.base';
+import { Output, EventEmitter, Input } from '@angular/core';
 
 /**
  * A generic model of the data returned from the *DetailsResponse
@@ -37,6 +38,9 @@
  */
 export abstract class DetailsPanelBaseImpl extends PanelBaseImpl {
 
+    @Input() id: string;
+    @Output() closeEvent = new EventEmitter<string>();
+
     private root: string;
     private req: string;
     private resp: string;
@@ -85,16 +89,10 @@
     }
 
     /**
-     * Details Panel Data Request - should be called whenever id changes
-     * If id is empty, no request is made
+     * Details Panel Data Request - should be called whenever row id changes
      */
-    requestDetailsPanelData(id: string) {
-        if (id === '') {
-            return;
-        }
+    requestDetailsPanelData(query: any) {
         this.closed = false;
-        const query = {'id': id};
-
         // Do not send if the Web Socket hasn't opened
         if (this.wss.isConnected()) {
             if (this.fs.debugOn('panel')) {
@@ -109,5 +107,8 @@
      */
     close(): void {
         this.closed = true;
+        this.id = null;
+        this.closeEvent.emit(this.id);
     }
+
 }