GUI -- Tabular views have divs that encapsulate the header to make math easier f…

…or calculating table height. - fixed bug in Device Details Panel where Ports table wouldn't scroll. - Minor refactoring

Change-Id: I2d8133fb4a92f82087566084143c32deb7393fb3

@@ -18,3 +18,9 @@
  ONOS GUI -- common -- CSS file
  */
 
+#view h2 {
+    margin: 0;
+    /* separated out so that other padding doesn't get clobbered */
+    padding-top: 20px;
+    padding-bottom: 20px;
+}

@@ -25,10 +25,7 @@
 
     // constants
     var tableIconTdSize = 33,
-        mastPdg = 8,
-        h2Pdg = 40,
-        thPdg = 12,
-        tbodyPdg = 5,
+        pdg = 12,
         colWidth = 'col-width',
         tableIcon = 'table-icon';
 
@@ -100,15 +97,15 @@
     // get the size of the window and then subtract the extra space at the top
     // to get the height of the table
     function setTableHeight(thead, tbody) {
-        var titleHeight = h2Pdg + fs.noPxStyle(d3.select('h2'), 'height'),
-            thHeight = thPdg + fs.noPxStyle(thead, 'height'),
-            totalHeight = titleHeight + thHeight + mastPdg - tbodyPdg,
-            tableHeight = fs.windowSize(mast.mastHeight() + totalHeight).height;
+        var ttlHgt = fs.noPxStyle(d3.select('.tabular-header'), 'height'),
+            thHgt = fs.noPxStyle(thead, 'height'),
+            totalHgt = ttlHgt + thHgt + pdg,
+            tbleHgt = fs.windowSize(mast.mastHeight() + totalHgt).height;
 
         thead.style('display', 'block');
         tbody.style({
             display: 'block',
-            height: tableHeight + 'px',
+            height: tbleHgt + 'px',
             overflow: 'auto'
         });
     }

 <!-- app partial HTML -->
 <div id="ov-app">
-    <div>
+    <div class="tabular-header">
         <h2>Applications ({{ctrl.tableData.length}} total)</h2>
         <div class="ctrl-btns">
             <div icon icon-size="36" icon-id="plus"></div>
@@ -9,6 +9,7 @@
             <div icon icon-size="36" icon-id="stop" class="disabled"></div>
         </div>
     </div>
+
     <table class="summary-list"
            onos-fixed-header
            onos-sortable-header
@@ -44,5 +45,4 @@
             </tr>
         </tbody>
     </table>
-
 </div>

@@ -16,7 +16,10 @@
 
 <!-- Cluster partial HTML -->
 <div id="ov-cluster">
-    <h2>Cluster Nodes ({{ctrl.tableData.length}} total)</h2>
+    <div class="tabular-header">
+        <h2>Cluster Nodes ({{ctrl.tableData.length}} total)</h2>
+    </div>
+
     <table class="summary-list"
            onos-fixed-header
            onos-sortable-header
@@ -50,5 +53,4 @@
         </tr>
         </tbody>
     </table>
-
 </div>

 <!-- Device partial HTML -->
 <div id="ov-device">
-    <h2>Devices ({{ctrl.tableData.length}} total)</h2>
+    <div class="tabular-header">
+        <h2>Devices ({{ctrl.tableData.length}} total)</h2>
+    </div>
+
     <table class="summary-list"
            onos-fixed-header
            onos-sortable-header
@@ -46,5 +49,4 @@
             </tr>
         </tbody>
     </table>
-
 </div>

@@ -27,19 +27,20 @@
     // internal state
     var self,
         detailsPanel,
-        container, top, bottom, iconDiv,
-        selRow;
+        pStartY, pHeight,
+        top, bottom, iconDiv,
+        wSize, selRow;
 
     // constants
-    // TODO: consider having a set y height that all tables start at
-    // to make calculations easier
-    var h2Pdg = 40,
-        mastPdg = 8,
-        tbodyPdg = 5,
-        cntrPdg = 24,
+    var topPdg = 13,
+        ctnrPdg = 24,
+        scrollSize = 10,
+        portsTblPdg = 50,
+
         pName = 'device-details-panel',
         detailsReq = 'deviceDetailsRequest',
         detailsResp = 'deviceDetailsResponse',
+
         propOrder = [
             'type', 'masterid', 'chassisid',
             'mfr', 'hw', 'sw', 'protocol', 'serial'
@@ -66,7 +67,7 @@
     }
 
     function setUpPanel() {
-        var closeBtn;
+        var container, closeBtn;
         detailsPanel.empty();
 
         container = detailsPanel.append('div').classed('container', true);
@@ -77,35 +78,13 @@
         iconDiv = top.append('div').classed('dev-icon', true);
         top.append('h2');
         top.append('table');
-
-        container.append('hr');
+        top.append('hr');
 
         bottom = container.append('div').classed('bottom', true);
-        bottom.append('h2').text('Ports');
+        bottom.append('h2').classed('ports-title', true).html('Ports');
         bottom.append('table');
     }
 
-    function createDetailsPane() {
-        var headerHeight = h2Pdg + fs.noPxStyle(d3.select('h2'), 'height'),
-            panelTop = headerHeight + tbodyPdg + mast.mastHeight() + mastPdg,
-            wSize = fs.windowSize(panelTop);
-
-        detailsPanel = ps.createPanel(pName, {
-            height: wSize.height,
-            margin: 0,
-            hideMargin: 0
-        });
-
-        detailsPanel.el().style({
-            position: 'absolute',
-            top: panelTop + 'px'
-        });
-
-        setUpPanel();
-
-        detailsPanel.hide();
-    }
-
     function addProp(tbody, index, value) {
         var tr = tbody.append('tr');
 
@@ -118,7 +97,7 @@
 
     function populateTop(tbody, details) {
         is.loadEmbeddedIcon(iconDiv, details._iconid_type, 40);
-        top.select('h2').text(details.id);
+        top.select('h2').html(details.id);
 
         propOrder.forEach(function (prop, i) {
             addProp(tbody, i, details[prop]);
@@ -139,9 +118,7 @@
     function populateBottom(table, ports) {
         var theader = table.append('thead').append('tr'),
             tbody = table.append('tbody'),
-            tbWidth, tbHeight,
-            scrollSize = 20,
-            padding = 55;
+            tbWidth, tbHeight;
 
         friendlyPortCols.forEach(function (col) {
             theader.append('th').html(col);
@@ -151,11 +128,12 @@
         });
 
         tbWidth = fs.noPxStyle(tbody, 'width') + scrollSize;
-        tbHeight = detailsPanel.height()
-                    - (fs.noPxStyle(detailsPanel.el().select('.top'), 'height')
-                    + fs.noPxStyle(detailsPanel.el().select('hr'), 'height')
-                    + fs.noPxStyle(detailsPanel.el().select('h2'), 'height')
-                    + padding);
+        tbHeight = pHeight
+                    - (fs.noPxStyle(detailsPanel.el()
+                                        .select('.top'), 'height')
+                    + fs.noPxStyle(detailsPanel.el()
+                                        .select('.ports-title'), 'height')
+                    + portsTblPdg);
 
         table.style({
             height: tbHeight + 'px',
@@ -164,18 +142,21 @@
             display: 'block'
         });
 
-        detailsPanel.width(tbWidth + cntrPdg);
+        detailsPanel.width(tbWidth + ctnrPdg);
     }
 
     function populateDetails(details) {
+        var topTb, btmTbl, ports;
         setUpPanel();
 
-        var topTb = top.select('table').append('tbody'),
-            btmTbl = bottom.select('table'),
-            ports = details.ports;
+        topTb = top.select('table').append('tbody');
+        btmTbl = bottom.select('table');
+        ports = details.ports;
 
         populateTop(topTb, details);
         populateBottom(btmTbl, ports);
+
+        detailsPanel.height(pHeight);
     }
 
     function respDetailsCb(data) {
@@ -184,6 +165,19 @@
         detailsPanel.show();
     }
 
+    function createDetailsPane() {
+        detailsPanel = ps.createPanel(pName, {
+            width: wSize.width,
+            margin: 0,
+            hideMargin: 0
+        });
+        detailsPanel.el().style({
+            position: 'absolute',
+            top: pStartY + 'px'
+        });
+        detailsPanel.hide();
+    }
+
     angular.module('ovDevice', [])
     .controller('OvDeviceCtrl',
         ['$log', '$scope', 'TableBuilderService', 'FnService',
@@ -200,10 +194,13 @@
             self = this;
             var handlers = {};
             self.panelData = [];
+            pStartY = fs.noPxStyle(d3.select('.tabular-header'), 'height')
+                                            + mast.mastHeight() + topPdg;
+            wSize = fs.windowSize(pStartY);
+            pHeight = wSize.height;
 
             function selCb($event, row) {
                 selRow = angular.element($event.currentTarget);
-
                 if ($scope.sel) {
                     wss.sendEvent(detailsReq, { id: row.id });
                 } else {
@@ -218,7 +215,6 @@
                 tag: 'device',
                 selCb: selCb
             });
-
             createDetailsPane();
 
             handlers[detailsResp] = respDetailsCb;

 <!-- Host partial HTML -->
 <div id="ov-host">
-    <h2>Hosts ({{ctrl.tableData.length}} total)</h2>
+    <div class="tabular-header">
+        <h2>Hosts ({{ctrl.tableData.length}} total)</h2>
+    </div>
+
     <table class="summary-list"
            onos-fixed-header
            onos-sortable-header
@@ -36,5 +39,4 @@
             </tr>
         </tbody>
     </table>
-
 </div>

@@ -16,7 +16,9 @@
 
 <!-- Intent partial HTML -->
 <div id="ov-intent">
-    <h2>Intents ({{ctrl.tableData.length}} total)</h2>
+    <div class="tabular-header">
+        <h2>Intents ({{ctrl.tableData.length}} total)</h2>
+    </div>
     <table class="summary-list"
            onos-fixed-header
            onos-sortable-header
@@ -51,5 +53,4 @@
             </tr>
         </tbody>
     </table>
-
 </div>

@@ -16,7 +16,10 @@
 
 <!-- Link partial HTML -->
 <div id="ov-link">
-    <h2>Links ({{ctrl.tableData.length}} total)</h2>
+    <div class="tabular-header">
+        <h2>Links ({{ctrl.tableData.length}} total)</h2>
+    </div>
+
     <table class="summary-list"
            onos-fixed-header
            onos-sortable-header
@@ -52,5 +55,4 @@
             </tr>
         </tbody>
     </table>
-
 </div>