GUI -- Implemented showSummary event (Icon still to do..) WIP

- included CSS for light/dark themes.
- Removed height from panel default settings.
- Fixed 'restart' bug in mock server - (renamed to mockserver.js)

Change-Id: I615299e6f8f07843edb074050b7450eea501bfbb

@@ -26,21 +26,21 @@
     width: 200px;
     right: -220px;
     opacity: 0;
-    background-color: rgba(255,255,255,0.8);
 
     padding: 10px;
-    color: black;
     font-size: 10pt;
 
     -moz-border-radius: 6px;
     border-radius: 6px;
-    box-shadow: 0px 2px 12px #777;
 }
 
-/* TODO: light/dark themes */
 .light .floatpanel {
-
+    background-color: rgba(255,255,255,0.8);
+    color: black;
+    box-shadow: 0 2px 12px #777;
 }
 .dark .floatpanel {
-
+    background-color: rgba(50,50,50,0.8);
+    color: #ccc;
+    box-shadow: 0 2px 12px #000;
 }

@@ -25,7 +25,6 @@
     var defaultSettings = {
         edge: 'right',
         width: 200,
-        height: 80,
         margin: 20,
         xtnTime: 750
     };
@@ -87,7 +86,9 @@
         // has to be called after el is set
         p.el.style(p.settings.edge, pxHide(p));
         panelWidth(p.settings.width);
-        panelHeight(p.settings.height);
+        if (p.settings.height) {
+            panelHeight(p.settings.height);
+        }
 
         panels[id] = p;
 

@@ -18,6 +18,8 @@
  ONOS GUI -- Topology View -- CSS file
  */
 
+/* --- Topo Map --- */
+
 .light #ov-topo svg {
     background-color: #fff;
     /* For Debugging the placement of the SVG layer... */
@@ -39,3 +41,80 @@
 .dark #ov-topo svg #topo-map {
     stroke: #444;
 }
+
+
+/* --- Topo Panels --- */
+
+#topo-p-summary {
+    /* Base css from panel.css */
+    
+}
+
+#topo-p-summary svg {
+    display: inline-block;
+    width: 42px;
+    height: 42px;
+}
+
+#topo-p-summary svg .glyphIcon {
+    stroke: none;
+    fill-rule: evenodd;
+}
+.light #topo-p-summary svg .glyphIcon {
+    fill: black;
+}
+.dark #topo-p-summary svg .glyphIcon {
+    fill: #ddd;
+}
+
+#topo-p-summary h2 {
+    position: absolute;
+    margin: 0 4px;
+    top: 20px;
+    left: 50px;
+}
+.light #topo-p-summary h2 {
+    color: black;
+}
+.dark #topo-p-summary h2 {
+    color: #ddd;
+}
+
+#topo-p-summary h3 {
+    margin: 0 4px;
+    top: 20px;
+    left: 50px;
+}
+.light #topo-p-summary h3 {
+    color: black;
+}
+.dark #topo-p-summary h3 {
+    color: #ddd;
+}
+
+#topo-p-summary p, table {
+    margin: 4px 4px;
+}
+
+#topo-p-summary td.label {
+    font-style: italic;
+    padding-right: 12px;
+    /* works for both light and dark themes ... */
+    color: #777;
+}
+
+#topo-p-summary td.value {
+}
+
+#topo-p-summary hr {
+    height: 1px;
+    border: 0;
+}
+.light #topo-p-summary hr {
+    background-color: #ccc;
+    color: #ccc;
+}
+.dark #topo-p-summary hr {
+    background-color: #888;
+    color: #888;
+}

@@ -28,7 +28,7 @@
     ];
 
     // references to injected services etc.
-    var $log, fs, ks, zs, gs, ms, tes, tfs, tps;
+    var $log, fs, ks, zs, gs, ms, tfs;
 
     // DOM elements
     var ovtopo, svg, defs, zoomLayer, mapG, forceG;
@@ -137,11 +137,6 @@
         tfs.initForce(forceG, svg.attr('width'), svg.attr('height'));
     }
 
-    function setUpPanels() {
-        tps.initPanels();
-    }
-
-
     // --- Controller Definition -----------------------------------------
 
     angular.module('ovTopo', moduleDependencies)
@@ -153,7 +148,7 @@
             'TopoEventService', 'TopoForceService', 'TopoPanelService',
 
         function ($scope, _$log_, $loc, $timeout, _fs_, mast,
-                  _ks_, _zs_, _gs_, _ms_, _tes_, _tfs_, _tps_) {
+                  _ks_, _zs_, _gs_, _ms_, tes, _tfs_, tps) {
             var self = this;
             $log = _$log_;
             fs = _fs_;
@@ -161,9 +156,7 @@
             zs = _zs_;
             gs = _gs_;
             ms = _ms_;
-            tes = _tes_;
             tfs = _tfs_;
-            tps = _tps_;
 
             self.notifyResize = function () {
                 svgResized(fs.windowSize(mast.mastHeight()));
@@ -173,7 +166,7 @@
             $scope.$on('$destroy', function () {
                 $log.log('OvTopoCtrl is saying Buh-Bye!');
                 tes.closeSock();
-                ps.destroyPanel('topo-p-summary');
+                tps.destroyPanels();
             });
 
             // svg layer and initialization of components
@@ -190,9 +183,8 @@
             setUpZoom();
             setUpMap();
             setUpForce();
-            setUpPanels();
 
-            // open up a connection to the server...
+            tps.initPanels();
             tes.openSock();
 
             $log.log('OvTopoCtrl has been created');

@@ -25,6 +25,14 @@
     // injected refs
     var $log, ps;
 
+    // constants
+    var idSum = 'topo-p-summary',
+        idDet = 'topo-p-detail',
+        idIns = 'topo-p-instance',
+        panelOpts = {
+            width: 260
+        };
+
     // internal state
     var settings;
 
@@ -45,6 +53,54 @@
 
     // ==========================
 
+    function addSep(tbody) {
+        tbody.append('tr').append('td').attr('colspan', 2).append('hr');
+    }
+
+    function addProp(tbody, label, value) {
+        var tr = tbody.append('tr');
+
+        function addCell(cls, txt) {
+            tr.append('td').attr('class', cls).text(txt);
+        }
+        addCell('label', label + ' :');
+        addCell('value', value);
+    }
+
+    function populateSummary(data) {
+        summaryPanel.empty();
+
+        var svg = summaryPanel.append('svg').attr({
+                width: 40,
+                height: 40
+            }).style('background-color', 'goldenrod'),
+            iid = '#' + (data.type || 'unknown');
+
+        var title = summaryPanel.append('h2'),
+            table = summaryPanel.append('table'),
+            tbody = table.append('tbody');
+
+        // append glyph iid to SVG  // black fill
+        // append glyph bird to SVG // white fill
+
+        title.text(data.id);
+
+        data.propOrder.forEach(function(p) {
+            if (p === '-') {
+                addSep(tbody);
+            } else {
+                addProp(tbody, p, data.props[p]);
+            }
+        });
+    }
+
+    function showSummaryPanel() {
+        summaryPanel.show();
+
+    }
+
+    // ==========================
+
     angular.module('ovTopo')
     .factory('TopoPanelService',
         ['$log', 'PanelService',
@@ -54,20 +110,24 @@
             ps = _ps_;
 
             function initPanels() {
-                summaryPanel = ps.createPanel('topo-p-summary');
+                summaryPanel = ps.createPanel(idSum, panelOpts);
                 // TODO: set up detail and instance panels..
             }
 
-            function showSummary(payload) {
-                summaryPanel.empty();
-                summaryPanel.append('h2').text(payload.id);
-                // TODO: complete the formatting...
+            function destroyPanels() {
+                ps.destroyPanel(idSum);
+                summaryPanel = null;
+                // TODO: destroy detail and instance panels..
+            }
 
-                summaryPanel.show();
+            function showSummary(payload) {
+                populateSummary(payload);
+                showSummaryPanel();
             }
 
             return {
                 initPanels: initPanels,
+                destroyPanels: destroyPanels,
                 showSummary: showSummary
             };
         }]);

@@ -72,7 +72,6 @@ describe('factory: fw/layer/panel.js', function () {
         expect($log.debug).toHaveBeenCalledWith('creating panel:', 'foo', {
             edge: 'right',
             width: 200,
-            height: 80,
             margin: 20,
             xtnTime: 750
         });
@@ -120,7 +119,6 @@ describe('factory: fw/layer/panel.js', function () {
         expect($log.debug).toHaveBeenCalledWith('creating panel:', 'foo', {
             edge: 'left',
             width: 250,
-            height: 80,
             margin: 20,
             xtnTime: 750
         });

@@ -34,7 +34,7 @@ describe('factory: view/topo/topoPanel.js', function() {
 
     it('should define api functions', function () {
         expect(fs.areFunctions(tps, [
-            'initPanels'
+            'initPanels', 'destroyPanels', 'showSummary'
         ])).toBeTruthy();
     });
 

@@ -12,7 +12,8 @@ var lastcmd,        // last command executed
     lastargs,       // arguments to last command
     connection,     // ws connection
     origin,         // origin of connection
-    scenario,       // test scenario name
+    scid,           // scenario ID
+    scdata,         // scenario data
     scdone,         // shows when scenario is over
     evno,           // next event number
     evdata;         // event data
@@ -35,6 +36,7 @@ server.listen(port, function() {
 
 server.on('listening', function () {
     console.log('OK, server is running');
+    console.log('(? for help)');
 });
 
 var wsServer = new WebSocketServer({
@@ -163,10 +165,10 @@ function customMessage(m) {
 
 function showScenarioStatus() {
     var msg;
-    if (!scenario) {
+    if (!scid) {
         console.log('No scenario loaded.');
     } else {
-        msg = 'Scenario: "' + scenario + '", ' +
+        msg = 'Scenario: "' + scid + '", ' +
                 (scdone ? 'DONE' : 'next event: ' + evno);
         console.log(msg);
     }
@@ -174,7 +176,19 @@ function showScenarioStatus() {
 
 function scenarioPath(evno) {
     var file = evno ? ('/ev_' + evno + '_onos.json') : '/scenario.json';
-    return 'ev/' + scenario + file;
+    return 'ev/' + scid + file;
+}
+
+
+function initScenario(verb) {
+    console.log(); // get past prompt
+    console.log(verb + ' scenario "' + scid + '"');
+    console.log(scdata.title);
+    scdata.description.forEach(function (d) {
+        console.log('  ' + d);
+    });
+    evno = 1;
+    scdone = false;
 }
 
 function setScenario(id) {
@@ -183,38 +197,24 @@ function setScenario(id) {
     }
 
     evdata = null;
-    scenario = id;
+    scid = id;
     fs.readFile(scenarioPath(), 'utf8', function (err, data) {
         if (err) {
             console.warn('No scenario named "' + id + '"', err);
-            scenario = null;
+            scid = null;
         } else {
-            evdata = JSON.parse(data);
-            console.log(); // get past prompt
-            console.log('Loading scenario "' + id + '"');
-            console.log(evdata.title);
-            evdata.description.forEach(function (d) {
-                console.log('  ' + d);
-            });
-            evno = 1;
-            scdone = false;
+            scdata = JSON.parse(data);
+            initScenario('Loading');
         }
         rl.prompt();
     });
 }
 
 function restartScenario() {
-    if (!scenario) {
+    if (!scid) {
         console.log('No scenario loaded.');
     } else {
-        console.log();
-        console.log('Restarting scenario "' + scenario + '"');
-        console.log(evdata.title);
-        evdata.description.forEach(function (d) {
-            console.log('  ' + d);
-        });
-        evno = 1;
-        scdone = false;
+        initScenario('Restarting');
     }
     rl.prompt();
 }
@@ -222,7 +222,7 @@ function restartScenario() {
 function nextEvent() {
     var path;
 
-    if (!scenario) {
+    if (!scid) {
         console.log('No scenario loaded.');
         rl.prompt();
     } else if (!connection) {