ONOS-3505: Basic behaviour of drivers table implemented.

- WIP -- still need to fix scrolling, styling, etc. Change-Id: I376155ab1375ea4b4b136969b89f74c3733178b8

ONOS-3505: Basic behaviour of drivers table implemented.
- WIP -- still need to fix scrolling, styling, etc. Change-Id: I376155ab1375ea4b4b136969b89f74c3733178b8
Simon Hunt · Gerrit Code Review
Commit a2b11a5c1a77261b24b88e647c6dfef465a00e97 a2b11a5c 1 parent a35b02c1
Showing 4 changed files with 121 additions and 69 deletions
apps/drivermatrix/src/main/java/org/onosproject/drivermatrix/DriverViewMessageHandler.java
apps/drivermatrix/src/main/resources/app/view/driverMatrix/driverMatrix.css
apps/drivermatrix/src/main/resources/app/view/driverMatrix/driverMatrix.html
apps/drivermatrix/src/main/resources/app/view/driverMatrix/driverMatrix.js
--- a/apps/drivermatrix/src/main/java/org/onosproject/drivermatrix/DriverViewMessageHandler.java
View file @a2b11a5
+++ b/apps/drivermatrix/src/main/java/org/onosproject/drivermatrix/DriverViewMessageHandler.java
View file @a2b11a5
@@ -30,24 +30,24 @@ import org.slf4j.LoggerFactory;
 import java.util.ArrayList;
 import java.util.Collection;
 import java.util.Comparator;
-import java.util.HashMap;
 import java.util.HashSet;
 import java.util.List;
-import java.util.Map;
 import java.util.Set;
 /**
- * Message handler for device view related messages.
+ * Message handler for driver matrix view related messages.
  */
 public class DriverViewMessageHandler extends UiMessageHandler {
     private final Logger log = LoggerFactory.getLogger(getClass());
+    private static final int ONE = 1;
     private static final String DRIVER_DATA_REQUEST = "driverDataRequest";
     private static final String DRIVER_DATA_RESPONSE = "driverDataResponse";
     private static final String DRIVERS = "drivers";
     private static final String BEHAVIOURS = "behaviours";
+    private static final String MATRIX = "matrix";
     private static final Comparator<? super Class<? extends Behaviour>> BEHAVIOUR_BY_NAME =
             (o1, o2) -> o1.getSimpleName().compareTo(o2.getSimpleName());
@@ -59,11 +59,12 @@ public class DriverViewMessageHandler extends UiMessageHandler {
     protected Collection<RequestHandler> createRequestHandlers() {
         return ImmutableSet.of(
                 new DataRequestHandler()
+                // TODO: for row selection, produce data for detail panel
 //                new DetailRequestHandler()
         );
     }
-    // handler for device table requests
+    // handler for driver matrix requests
     private final class DataRequestHandler extends RequestHandler {
         private DataRequestHandler() {
@@ -72,54 +73,46 @@ public class DriverViewMessageHandler extends UiMessageHandler {
         @Override
         public void process(long sid, ObjectNode payload) {
-            // Search for drivers producing two artifacts:
-            // 1) list of abstract behaviours as column listing
-            // 2) sparse matrix of drivers-to-concrete behaviours
-
             DriverService driverService = get(DriverService.class);
-            // Collect all behaviours for all drivers
+            List<Driver> drivers = new ArrayList<>(driverService.getDrivers());
-            Map<Driver, Set<Class<? extends Behaviour>>> driverBehaviours = new HashMap<>();
+            drivers = orderDrivers(drivers);
-            driverService.getDrivers().forEach(d -> driverBehaviours.put(d, d.behaviours()));
-
-            // Order all drivers
-            List<Driver> drivers = orderDrivers(driverBehaviours.keySet());
             // Produce a union of all behaviours (and order them)
-            List<Class<? extends Behaviour>> behaviours = orderBehaviours(driverBehaviours.values());
+            List<Class<? extends Behaviour>> behaviours = orderBehaviours(drivers);
             // Produce a JSON structure and send it
-            sendMessage(DRIVER_DATA_RESPONSE, 0, driversJson(driverBehaviours, drivers, behaviours));
+            sendMessage(DRIVER_DATA_RESPONSE, 0, driversJson(drivers, behaviours));
         }
-        private List<Driver> orderDrivers(Set<Driver> drivers) {
+        private List<Driver> orderDrivers(List<Driver> drivers) {
             // For now order by alphanumeric name of the driver
-            List<Driver> ordered = new ArrayList<>(drivers);
+            drivers.sort(DRIVER_BY_NAME);
-            ordered.sort(DRIVER_BY_NAME);
+            return drivers;
-            return ordered;
         }
-        private List<Class<? extends Behaviour>>
+        private List<Class<? extends Behaviour>> orderBehaviours(List<Driver> drivers) {
-        orderBehaviours(Collection<Set<Class<? extends Behaviour>>> behaviours) {
+            // first, produce a set-union of all behaviours from all drivers...
-            // For now order by alphanumeric name of the abstract behaviour simple name
             Set<Class<? extends Behaviour>> allBehaviours = new HashSet<>();
-            behaviours.forEach(allBehaviours::addAll);
+            drivers.forEach(d -> allBehaviours.addAll(d.behaviours()));
+
+            // for now, order by alphanumeric name of the abstract behaviour simple name
             List<Class<? extends Behaviour>> ordered = new ArrayList<>(allBehaviours);
             ordered.sort(BEHAVIOUR_BY_NAME);
             return ordered;
         }
-        private ObjectNode driversJson(Map<Driver, Set<Class<? extends Behaviour>>> driverBehaviours,
+        private ObjectNode driversJson(List<Driver> drivers,
-                                       List<Driver> drivers,
                                        List<Class<? extends Behaviour>> behaviours) {
             ObjectNode root = objectNode();
             addBehaviours(root, behaviours);
             addDrivers(root, drivers);
-            addRelationships(root, drivers, behaviours, driverBehaviours);
+            addMatrixCells(root, drivers);
             return root;
         }
-        private void addBehaviours(ObjectNode root, List<Class<? extends Behaviour>> behaviours) {
+        private void addBehaviours(ObjectNode root,
+                                   List<Class<? extends Behaviour>> behaviours) {
             ArrayNode array = arrayNode();
             root.set(BEHAVIOURS, array);
             behaviours.forEach(b -> array.add(b.getSimpleName()));
@@ -131,9 +124,19 @@ public class DriverViewMessageHandler extends UiMessageHandler {
             drivers.forEach(d -> array.add(d.name()));
         }
-        private void addRelationships(ObjectNode root,
+        private void addMatrixCells(ObjectNode root, List<Driver> drivers) {
-                                      List<Driver> drivers, List<Class<? extends Behaviour>> behaviours,
+            ObjectNode matrix = objectNode();
-                                      Map<Driver, Set<Class<? extends Behaviour>>> driverBehaviours) {
+            root.set(MATRIX, matrix);
+
+            drivers.forEach(d -> {
+                ObjectNode dnode = objectNode();
+                matrix.set(d.name(), dnode);
+
+                d.behaviours().forEach(b -> {
+                    // TODO: can put a payload here, rather than a '1' marker
+                    dnode.put(b.getSimpleName(), ONE);
+                });
+            });
         }
     }
--- a/apps/drivermatrix/src/main/resources/app/view/driverMatrix/driverMatrix.css
View file @a2b11a5
+++ b/apps/drivermatrix/src/main/resources/app/view/driverMatrix/driverMatrix.css
View file @a2b11a5
-/* css for sample table view */
+/* css for driver matrix view */
 #ov-driver-matrix h2 {
     display: inline-block;
 }
+#ov-driver-matrix table {
+    margin-left: 20px;
+}
+
+#ov-driver-matrix .table-header-rotated {
+    border-collapse: collapse;
+}
+#ov-driver-matrix .table-header-rotated td {
+    width: 30px;
+}
+#ov-driver-matrix .table-header-rotated td.xmark {
+    background-color: yellow;
+}
+#ov-driver-matrix .table-header-rotated td {
+    text-align: center;
+    padding: 2px 5px;
+    border: 1px solid #ccc;
+}
+#ov-driver-matrix .table-header-rotated th.rotate {
+    height: 140px;
+    white-space: nowrap;
+}
+#ov-driver-matrix .table-header-rotated th.rotate > div {
+    -webkit-transform: translate(25px, 51px) rotate(-45deg);
+    transform: translate(25px, 51px) rotate(-45deg);
+    width: 30px;
+}
+#ov-driver-matrix .table-header-rotated th.rotate > div > span {
+    border-bottom: 1px solid #ccc;
+    padding: 5px 10px;
+}
+#ov-driver-matrix .table-header-rotated th.row-header {
+    padding: 0 10px;
+    border-bottom: 1px solid #ccc;
+    text-align: right;
+}
+
+
 /* Panel Styling */
 #ov-driver-matrix-item-details-panel.floatpanel {
     position: absolute;
@@ -33,3 +71,4 @@
     font-style: italic;
     opacity: 0.8;
 }
+
--- a/apps/drivermatrix/src/main/resources/app/view/driverMatrix/driverMatrix.html
View file @a2b11a5
+++ b/apps/drivermatrix/src/main/resources/app/view/driverMatrix/driverMatrix.html
View file @a2b11a5
 <!-- partial HTML -->
 <div id="ov-driver-matrix">
     <div class="tabular-header">
-        <h2>Items ({{tableData.length}} total)</h2>
+        <h2>Driver Matrix</h2>
         <div class="ctrl-btns">
+            <!-- TODO: fix (or remove) refresh button -->
             <div class="refresh" ng-class="{active: autoRefresh}"
                  icon icon-id="refresh" icon-size="36"
                  tooltip tt-msg="autoRefreshTip"
@@ -10,37 +11,36 @@
         </div>
     </div>
-    <div class="summary-list" onos-table-resize>
+    <!-- TODO: handle resizing / scrolling -->
-
+    <div class="driver-matrix">
-        <div class="table-header" onos-sortable-header>
+        <table class="table-header-rotated">
-            <table>
+            <thead>
                 <tr>
-                    <td colId="id" sortable>Item ID </td>
+                    <!-- first column header is not rotated -->
-                    <td colId="label" sortable>Label </td>
+                    <th></th>
-                    <td colId="code" sortable>Code </td>
+                    <!-- following headers are rotated -->
+                    <th class="rotate" ng-repeat="beh in behaviours track by $index">
+                        <div><span>{{beh}}</span></div>
+                    </th>
                 </tr>
-            </table>
-        </div>
-        <div class="table-body">
+            </thead>
-            <table>
-                <tr ng-if="!tableData.length" class="no-data">
-                    <td colspan="3">
-                        No Items found
-                    </td>
-                </tr>
-                <tr ng-repeat="item in tableData track by $index"
+            <tbody>
-                    ng-click="selectCallback($event, item)"
+            <tr ng-repeat="drv in drivers track by $index">
-                    ng-class="{selected: item.id === selId}">
+                <!--ng-click="selectCallback($event, item)"-->
-                    <td>{{item.id}}</td>
+                <!--ng-class="{selected: item.id === selId}">-->
-                    <td>{{item.label}}</td>
+                <th class="row-header">
-                    <td>{{item.code}}</td>
+                    {{drv}}
+                </th>
+                <td ng-repeat="beh in behaviours track by $index"
+                    ng-class="{'xmark':cellMarked(drv, beh)}">
+                    {{cellValue(drv, beh)}}
+                </td>
             </tr>
+            </tbody>
         </table>
     </div>
-    </div>
-
     <ov-driver-matrix-item-details-panel></ov-driver-matrix-item-details-panel>
 </div>
--- a/apps/drivermatrix/src/main/resources/app/view/driverMatrix/driverMatrix.js
View file @a2b11a5
+++ b/apps/drivermatrix/src/main/resources/app/view/driverMatrix/driverMatrix.js
View file @a2b11a5
-// js for sample app table view
+// js for driver view
 (function () {
     'use strict';
@@ -8,8 +8,8 @@
     // constants
     var detailsReq = 'driverDataRequest',
         detailsResp = 'driverDataResponse',
+        // TODO: deal with details panel
         pName = 'ov-driver-matrix-item-details-panel',
-
         propOrder = ['id', 'label', 'code'],
         friendlyProps = ['Item ID', 'Item Label', 'Special Code'];
@@ -40,9 +40,11 @@
     }
     function respDetailsCb(data) {
-        $log.debug(data);
+        //$log.debug('Matrix Data', data);
-        //$scope.panelDetails = data.details;
+        $scope.behaviours = data.behaviours;
-        //$scope.$apply();
+        $scope.drivers = data.drivers;
+        $scope.matrix = data.matrix;
+        $scope.$apply();
     }
     angular.module('ovDriverMatrix', [])
@@ -57,7 +59,9 @@
                 wss = _wss_;
                 var handlers = {};
-                $scope.panelDetails = {};
+                $scope.behaviours = [];
+                $scope.drivers = [];
+                $scope.matrix = {};
                 // details response handler
                 handlers[detailsResp] = respDetailsCb;
@@ -75,12 +79,17 @@
                 //    $log.debug('Got a click on:', row);
                 //}
-                //// TableBuilderService creating a table for us
+                function cellHit(d, b) {
-                //tbs.buildTable({
+                    var drec = $scope.matrix[d],
-                //    scope: $scope,
+                        brec = drec && drec[b];
-                //    tag: 'driverMatrix',
+                    return !!brec;
-                //    selCb: selCb
+                }
-                //});
+
+                $scope.cellMarked = cellHit;
+
+                $scope.cellValue = function(d, b) {
+                    return cellHit(d, b) ? 'x' : '';
+                };
                 // cleanup
                 $scope.$on('$destroy', function () {
@@ -91,6 +100,7 @@
                 $log.log('OvDriverMatrixCtrl has been created');
             }])
+        // TODO: implement row selection to show details panel
         .directive('ovDriverMatrixItemDetailsPanel', ['PanelService', 'KeyService',
             function (ps, ks) {
             return {