GUI -- Adjusted height of tables in tabular views, added new and removed columns…

… in Device View. Removed rounded bottom corners of tabular views, created table.css instead of using common.css Change-Id: I77ff4c3abe051e1e4e566eb805e4b4a695f011ba

GUI -- Adjusted height of tables in tabular views, added new and removed columns…
… in Device View. Removed rounded bottom corners of tabular views, created table.css instead of using common.css Change-Id: I77ff4c3abe051e1e4e566eb805e4b4a695f011ba
Bri Prebilic Cole
Commit 264c5ec59082b67e13dc88b4e76f98728231e926 264c5ec5 1 parent 40a398b9
Showing 6 changed files with 161 additions and 97 deletions
web/gui/src/main/java/org/onosproject/ui/impl/DeviceViewMessageHandler.java
web/gui/src/main/webapp/app/common.css
web/gui/src/main/webapp/app/fw/widget/table.css
web/gui/src/main/webapp/app/fw/widget/table.js
web/gui/src/main/webapp/app/view/device/device.html
web/gui/src/main/webapp/index.html
--- a/web/gui/src/main/java/org/onosproject/ui/impl/DeviceViewMessageHandler.java
View file @264c5ec
+++ b/web/gui/src/main/java/org/onosproject/ui/impl/DeviceViewMessageHandler.java
View file @264c5ec
@@ -20,12 +20,18 @@ import com.fasterxml.jackson.databind.node.ObjectNode;
 import com.google.common.collect.ImmutableSet;
 import org.onosproject.mastership.MastershipService;
 import org.onosproject.net.Device;
+import org.onosproject.net.DeviceId;
+import org.onosproject.net.Port;
 import org.onosproject.net.device.DeviceService;
+import org.onosproject.net.link.LinkService;
 import java.util.ArrayList;
 import java.util.Arrays;
 import java.util.List;
+//import org.onosproject.net.Link;
+//import java.util.Set;
+
 /**
  * Message handler for device view related messages.
  */
@@ -46,7 +52,10 @@ public class DeviceViewMessageHandler extends AbstractTabularViewMessageHandler 
         DeviceService service = get(DeviceService.class);
         MastershipService mastershipService = get(MastershipService.class);
-        TableRow[] rows = generateTableRows(service, mastershipService);
+        LinkService linkService = get(LinkService.class);
+        TableRow[] rows = generateTableRows(service,
+                                            mastershipService,
+                                            linkService);
         RowComparator rc =
                 new RowComparator(sortCol, RowComparator.direction(sortDir));
         Arrays.sort(rows, rc);
@@ -58,10 +67,14 @@ public class DeviceViewMessageHandler extends AbstractTabularViewMessageHandler 
     }
     private TableRow[] generateTableRows(DeviceService service,
-                                         MastershipService mastershipService) {
+                                         MastershipService mastershipService,
+                                         LinkService linkService) {
         List<TableRow> list = new ArrayList<>();
         for (Device dev : service.getDevices()) {
-            list.add(new DeviceTableRow(service, mastershipService, dev));
+            list.add(new DeviceTableRow(service,
+                                        mastershipService,
+                                        linkService,
+                                        dev));
         }
         return list.toArray(new TableRow[list.size()]);
     }
@@ -76,40 +89,70 @@ public class DeviceViewMessageHandler extends AbstractTabularViewMessageHandler 
         private static final String AVAILABLE_IID = "_iconid_available";
         private static final String TYPE_IID = "_iconid_type";
         private static final String DEV_ICON_PREFIX = "devIcon_";
-        private static final String ROLE = "role";
+        private static final String NUM_PORTS = "num_ports";
+        private static final String NUM_EGRESS_LINKS = "num_elinks";
         private static final String MFR = "mfr";
         private static final String HW = "hw";
         private static final String SW = "sw";
-        private static final String SERIAL = "serial";
         private static final String PROTOCOL = "protocol";
-        private static final String CHASSISID = "chassisid";
         private static final String MASTERID = "masterid";
+        private static final String CHASSISID = "chassisid";
+        private static final String SERIAL = "serial";
         private static final String[] COL_IDS = {
-                ID, AVAILABLE, AVAILABLE_IID, TYPE_IID, ROLE,
+                AVAILABLE, AVAILABLE_IID, TYPE_IID, ID,
-                MFR, HW, SW, SERIAL, PROTOCOL, CHASSISID, MASTERID
+                NUM_PORTS, NUM_EGRESS_LINKS, MASTERID, MFR, HW, SW,
+                PROTOCOL, CHASSISID, SERIAL
         };
         private static final String ICON_ID_ONLINE = "deviceOnline";
         private static final String ICON_ID_OFFLINE = "deviceOffline";
+        // TODO: use in details pane
+//        private String getPorts(List<Port> ports) {
+//            String formattedString = "";
+//            int numPorts = 0;
+//
+//            for (Port p : ports) {
+//                numPorts++;
+//                formattedString += p.number().toString() + ", ";
+//            }
+//            return formattedString + "Total: " + numPorts;
+//        }
+
+        // TODO: use in details pane
+//        private String getEgressLinks(Set<Link> links) {
+//            String formattedString = "";
+//
+//            for (Link l : links) {
+//                formattedString += l.dst().port().toString() + ", ";
+//            }
+//            return formattedString;
+//        }
+
+        // TODO: include "extra" backend information in device details pane
         public DeviceTableRow(DeviceService service,
                               MastershipService ms,
+                              LinkService ls,
                               Device d) {
             boolean available = service.isAvailable(d.id());
             String iconId = available ? ICON_ID_ONLINE : ICON_ID_OFFLINE;
+            DeviceId id = d.id();
+            List<Port> ports = service.getPorts(id);
+//            Set<Link> links = ls.getDeviceEgressLinks(id);
-            add(ID, d.id().toString());
+            add(ID, id.toString());
             add(AVAILABLE, Boolean.toString(available));
             add(AVAILABLE_IID, iconId);
             add(TYPE_IID, getTypeIconId(d));
-            add(ROLE, service.getRole(d.id()).toString());
             add(MFR, d.manufacturer());
             add(HW, d.hwVersion());
             add(SW, d.swVersion());
-            add(SERIAL, d.serialNumber());
+//            add(SERIAL, d.serialNumber());
             add(PROTOCOL, d.annotations().value(PROTOCOL));
-            add(CHASSISID, d.chassisId().toString());
+            add(NUM_PORTS, Integer.toString(ports.size()));
+//            add(NUM_EGRESS_LINKS, Integer.toString(links.size()));
+//            add(CHASSISID, d.chassisId().toString());
             add(MASTERID, ms.getMasterFor(d.id()).toString());
         }
--- a/web/gui/src/main/webapp/app/common.css
View file @264c5ec
+++ b/web/gui/src/main/webapp/app/common.css
View file @264c5ec
@@ -18,75 +18,3 @@
  ONOS GUI -- common -- CSS file
  */
-/* ------ for summary-list tables ------ */
-
-table.summary-list {
-    margin: 0 20px 16px 12px;
-    font-size: 10pt;
-    border-spacing: 0;
-}
-
-table.summary-list tbody {
-    border-radius: 0 0 8px 8px;
-}
-
-table.summary-list td.nodata {
-    text-align: center;
-    font-style: italic;
-}
-
-.light table.summary-list tr:nth-child(even) {
-    background-color: #ddd;
-}
-.light table.summary-list tr:nth-child(odd) {
-    background-color: #eee;
-}
-.dark table.summary-list tr:nth-child(even) {
-    background-color: #333;
-}
-.dark table.summary-list tr:nth-child(odd) {
-    background-color: #444;
-}
-
-.light table.summary-list tr.selected {
-    background-color: deepskyblue;
-}
-
-.dark table.summary-list tr.selected {
-    background-color: #304860;
-}
-
-table.summary-list td,th {
-    padding: 6px 6px 6px 6px;
-    text-align: left;
-}
-
-table.summary-list th {
-    letter-spacing: 0.02em;
-    cursor: pointer;
-}
-table.summary-list th:first-child {
-    border-radius: 8px 0 0 0;
-}
-table.summary-list th:last-child {
-    border-radius: 0 8px 0 0;
-}
-
-.light table.summary-list th {
-    background-color: #bbb;
-}
-.dark table.summary-list th {
-    background-color: #222;
-    color: #ccc;
-}
-
-/* rows are selectable */
-table.summary-list td {
-    cursor: pointer;
-}
-
-.dark table.summary-list td {
-    color: #ccc;
-}
-
-/* ------------------------------------ */
--- a/web/gui/src/main/webapp/app/fw/widget/table.css 0 → 100644
View file @264c5ec
+++ b/web/gui/src/main/webapp/app/fw/widget/table.css 0 → 100644
View file @264c5ec
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* ------ for summary-list tables ------ */
+
+table.summary-list {
+    margin: 0 20px 16px 12px;
+    font-size: 10pt;
+    border-spacing: 0;
+}
+
+table.summary-list td.nodata {
+    text-align: center;
+    font-style: italic;
+}
+
+.light table.summary-list tr:nth-child(even) {
+    background-color: #ddd;
+}
+.light table.summary-list tr:nth-child(odd) {
+    background-color: #eee;
+}
+.dark table.summary-list tr:nth-child(even) {
+    background-color: #333;
+}
+.dark table.summary-list tr:nth-child(odd) {
+    background-color: #444;
+}
+
+.light table.summary-list tr.selected {
+    background-color: deepskyblue;
+}
+
+.dark table.summary-list tr.selected {
+    background-color: #304860;
+}
+
+table.summary-list td,
+table.summary-list th {
+    padding: 6px;
+    text-align: left;
+}
+
+table.summary-list th {
+    letter-spacing: 0.02em;
+    cursor: pointer;
+}
+table.summary-list th:first-child {
+    border-radius: 8px 0 0 0;
+}
+table.summary-list th:last-child {
+    border-radius: 0 8px 0 0;
+}
+
+.light table.summary-list th {
+    background-color: #bbb;
+}
+.dark table.summary-list th {
+    background-color: #222;
+    color: #ccc;
+}
+
+/* rows are selectable */
+table.summary-list td {
+    cursor: pointer;
+}
+
+.dark table.summary-list td {
+    color: #ccc;
+}
--- a/web/gui/src/main/webapp/app/fw/widget/table.js
View file @264c5ec
+++ b/web/gui/src/main/webapp/app/fw/widget/table.js
View file @264c5ec
@@ -21,11 +21,14 @@
     'use strict';
     // injected refs
-    var $log, $window, fs, is;
+    var $log, $window, fs, mast, is;
     // constants
     var tableIconTdSize = 33,
-        bottomMargin = 200,
+        mastPdg = 8,
+        h2Pdg = 40,
+        thPdg = 12,
+        tbodyPdg = 5,
         colWidth = 'col-width',
         tableIcon = 'table-icon';
@@ -49,7 +52,8 @@
     //   - icon width,
     //   - and default width
     // assumes assigned width is not given to icons
-    // returns the width of all columns that are not icons have an assigned width
+    // returns the width of all columns that are not icons
+    // or have an assigned width
     function getDefaultWidth(headers) {
         var winWidth = fs.windowSize().width,
             iconCols = 0,
@@ -92,12 +96,17 @@
         });
     }
+    // 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 winHeight = fs.windowSize().height;
+        var titleHeight = h2Pdg + fs.noPxStyle(d3.select('h2'), 'height'),
+            thHeight = thPdg + fs.noPxStyle(d3.select('th'), 'height'),
+            totalHeight = titleHeight + thHeight + tbodyPdg + mastPdg,
+            tableHeight = fs.windowSize(mast.mastHeight() + totalHeight).height;
         thead.style('display', 'block');
         tbody.style({'display': 'block',
-            'height': ((winHeight - bottomMargin) + 'px'),
+            'height': (tableHeight + 'px'),
             'overflow': 'auto'
         });
     }
@@ -150,11 +159,13 @@
     }
     angular.module('onosWidget')
-        .directive('onosFixedHeader', ['$window', 'FnService',
+        .directive('onosFixedHeader', ['$window', 'FnService', 'MastService',
-            function (_$window_, _fs_) {
+            function (_$window_, _fs_, _mast_) {
             return function (scope, element) {
                 $window = _$window_;
                 fs = _fs_;
+                mast = _mast_;
+
                 var w = angular.element($window),
                     table = d3.select(element[0]),
                     thead = table.select('thead'),
--- a/web/gui/src/main/webapp/app/view/device/device.html
View file @264c5ec
+++ b/web/gui/src/main/webapp/app/view/device/device.html
View file @264c5ec
@@ -10,13 +10,12 @@
                 <th colId="available" class="table-icon" sortable></th>
                 <th colId="type" class="table-icon" sortable></th>
                 <th colId="id" sortable>Device ID </th>
+                <th colId="masterid" sortable>Master Instance </th>
+                <th colId="num_ports" sortable>Ports </th>
                 <th colId="mfr" sortable>Vendor </th>
                 <th colId="hw" sortable>H/W Version </th>
                 <th colId="sw" sortable>S/W Version </th>
-                <th colId="chassisid" sortable>Chassis ID </th>
-                <th colId="serial" sortable>Serial # </th>
                 <th colId="protocol" sortable>Protocol </th>
-                <th colId="masterid" sortable>Master Instance </th>
             </tr>
         </thead>
@@ -36,13 +35,12 @@
                     <div icon icon-id="{{dev._iconid_type}}"></div>
                 </td>
                 <td>{{dev.id}}</td>
+                <td>{{dev.masterid}}</td>
+                <td>{{dev.num_ports}}</td>
                 <td>{{dev.mfr}}</td>
                 <td>{{dev.hw}}</td>
                 <td>{{dev.sw}}</td>
-                <td>{{dev.chassisid}}</td>
-                <td>{{dev.serial}}</td>
                 <td>{{dev.protocol}}</td>
-                <td>{{dev.masterid}}</td>
             </tr>
         </tbody>
     </table>
--- a/web/gui/src/main/webapp/index.html
View file @264c5ec
+++ b/web/gui/src/main/webapp/index.html
View file @264c5ec
@@ -90,6 +90,7 @@
     <link rel="stylesheet" href="app/fw/widget/button.css">
     <link rel="stylesheet" href="app/fw/widget/toolbar.css">
     <link rel="stylesheet" href="app/fw/widget/tooltip.css">
+    <link rel="stylesheet" href="app/fw/widget/table.css">
     <!-- This is where contributed javascript will get injected -->
     <!-- {INJECTED-JAVASCRIPT-START} -->