GUI -- [ONOS-344] - Ability to disable Details Pane (press the 'D' key).

Change-Id: Icc3ba464f6619745e775978dd0e26874b84c9a7b

@@ -142,9 +142,10 @@
 
 
         O: [toggleSummary, 'Toggle ONOS summary pane'],
         O: [toggleSummary, 'Toggle ONOS summary pane'],
         I: [toggleInstances, 'Toggle ONOS instances pane'],
         I: [toggleInstances, 'Toggle ONOS instances pane'],
+        D: [toggleDetails, 'Disable / enable details pane'],
         B: [toggleBg, 'Toggle background image'],
         B: [toggleBg, 'Toggle background image'],
         H: [toggleHosts, 'Toggle host visibility'],
         H: [toggleHosts, 'Toggle host visibility'],
-        L: [cycleLabels, 'Cycle Device labels'],
+        L: [cycleLabels, 'Cycle device labels'],
         P: togglePorts,
         P: togglePorts,
         U: [unpin, 'Unpin node (hover mouse over)'],
         U: [unpin, 'Unpin node (hover mouse over)'],
         R: [resetZoomPan, 'Reset zoom / pan'],
         R: [resetZoomPan, 'Reset zoom / pan'],
@@ -201,7 +202,9 @@
         portLabelsOn = false,
         portLabelsOn = false,
         cat7 = d3u.cat7(),
         cat7 = d3u.cat7(),
         colorAffinity = false,
         colorAffinity = false,
-        showHosts = false;
+        showHosts = false,
+        useDetails = true,
+        haveDetails = false;
 
 
     // constants
     // constants
     var hoverModeAll = 1,
     var hoverModeAll = 1,
@@ -252,6 +255,10 @@
     // ==============================
     // ==============================
     // Key Callbacks
     // Key Callbacks
 
 
+    function flash(txt) {
+        network.view.flash(txt);
+    }
+
     function testMe(view) {
     function testMe(view) {
         //view.alert('Theme is ' + view.getTheme());
         //view.alert('Theme is ' + view.getTheme());
         //view.flash('This is some text');
         //view.flash('This is some text');
@@ -320,7 +327,7 @@
     function toggleHosts() {
     function toggleHosts() {
         showHosts = !showHosts;
         showHosts = !showHosts;
         updateHostVisibility();
         updateHostVisibility();
-        network.view.flash('Hosts ' + visVal(showHosts));
+        flash('Hosts ' + visVal(showHosts));
     }
     }
 
 
     function cycleLabels() {
     function cycleLabels() {
@@ -350,7 +357,7 @@
     function handleEscape(view) {
     function handleEscape(view) {
         if (oiShowMaster) {
         if (oiShowMaster) {
             cancelAffinity();
             cancelAffinity();
-        } else if (detailPane.isVisible()) {
+        } else if (haveDetails) {
             deselectAll();
             deselectAll();
         } else if (oiBox.isVisible()) {
         } else if (oiBox.isVisible()) {
             hideInstances();
             hideInstances();
@@ -775,8 +782,11 @@
 
 
     function showDetails(data) {
     function showDetails(data) {
         evTrace(data);
         evTrace(data);
+        haveDetails = true;
         populateDetails(data.payload);
         populateDetails(data.payload);
-        showDetailPane();
+        if (useDetails) {
+            showDetailPane();
+        }
     }
     }
 
 
     function showTraffic(data) {
     function showTraffic(data) {
@@ -904,6 +914,19 @@
         hideSummaryPane();
         hideSummaryPane();
     }
     }
 
 
+    function toggleDetails() {
+        useDetails = !useDetails;
+        if (useDetails) {
+            flash('Enable details pane');
+            if (haveDetails) {
+                showDetailPane();
+            }
+        } else {
+            flash('Disable details pane');
+            hideDetailPane();
+        }
+    }
+
     // encapsulate interaction between summary and details panes
     // encapsulate interaction between summary and details panes
     function showSummaryPane() {
     function showSummaryPane() {
         if (detailPane.isVisible()) {
         if (detailPane.isVisible()) {
@@ -951,7 +974,7 @@
             two: selectOrder[1],
             two: selectOrder[1],
             ids: selectOrder
             ids: selectOrder
         });
         });
-        network.view.flash('Host-to-Host flow added');
+        flash('Host-to-Host flow added');
     }
     }
 
 
     function addMultiSourceIntentAction() {
     function addMultiSourceIntentAction() {
@@ -960,7 +983,7 @@
             dst: selectOrder[selectOrder.length - 1],
             dst: selectOrder[selectOrder.length - 1],
             ids: selectOrder
             ids: selectOrder
         });
         });
-        network.view.flash('Multi-Source flow added');
+        flash('Multi-Source flow added');
     }
     }
 
 
 
 
@@ -981,7 +1004,7 @@
     function showTrafficAction() {
     function showTrafficAction() {
         hoverMode = hoverModeIntents;
         hoverMode = hoverModeIntents;
         requestSelectTraffic();
         requestSelectTraffic();
-        network.view.flash('Related Traffic');
+        flash('Related Traffic');
     }
     }
 
 
     function requestSelectTraffic() {
     function requestSelectTraffic() {
@@ -1000,7 +1023,7 @@
     function showDeviceLinkFlowsAction() {
     function showDeviceLinkFlowsAction() {
         hoverMode = hoverModeFlows;
         hoverMode = hoverModeFlows;
         requestDeviceLinkFlows();
         requestDeviceLinkFlows();
-        network.view.flash('Device Flows');
+        flash('Device Flows');
     }
     }
 
 
     function requestDeviceLinkFlows() {
     function requestDeviceLinkFlows() {
@@ -1018,7 +1041,7 @@
     function showAllTrafficAction() {
     function showAllTrafficAction() {
         hoverMode = hoverModeAll;
         hoverMode = hoverModeAll;
         requestAllTraffic();
         requestAllTraffic();
-        network.view.flash('All Traffic');
+        flash('All Traffic');
     }
     }
 
 
     function requestAllTraffic() {
     function requestAllTraffic() {
@@ -2221,6 +2244,7 @@
     }
     }
 
 
     function emptySelect() {
     function emptySelect() {
+        haveDetails = false;
         hideDetailPane();
         hideDetailPane();
         cancelTraffic();
         cancelTraffic();
     }
     }
@@ -2232,6 +2256,7 @@
     }
     }
 
 
     function multiSelect() {
     function multiSelect() {
+        haveDetails = true;
         populateMultiSelect();
         populateMultiSelect();
         requestTrafficForMode();
         requestTrafficForMode();
     }
     }