GUI -- TableService can take a div, config object, and data object in order to programmatically render and load data into a table. Test functions added.
Change-Id: I585cee8331612be984ca7ead2829525af7f3d3e5
diff --git a/web/gui/src/main/webapp/_bripc/practice-table.html b/web/gui/src/main/webapp/_bripc/practice-table.html
index 17b6656..1d9f22b 100644
--- a/web/gui/src/main/webapp/_bripc/practice-table.html
+++ b/web/gui/src/main/webapp/_bripc/practice-table.html
@@ -31,6 +31,8 @@
<script type="text/javascript" src="../tp/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="practice-table.js"></script>
+ <script type="text/javascript" src="../app/fw/widget/widget.js"></script>
+ <script type="text/javascript" src="../app/fw/widget/table.js"></script>
<style>
html,
@@ -44,241 +46,13 @@
color: darkred;
}
- table {
- height: 200px;
- }
-
</style>
</head>
<!-- outline for using a controller in Angular -->
<body ng-app="practiceTable">
<h2>Scrolling Table Practice</h2>
- <div>
- <table table-height="200px" fixed-header>
- <thead>
- <tr>
- <th>URI</th>
- <th>Vendor</th>
- <th>Hardware Version</th>
- <th>Software Version</th>
- <th>Serial Number</th>
- <th>Protocol</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial#101291031813</td>
- <td>protocol protocol protocol protocol protocol protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr><tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial#101291031813</td>
- <td>protocol protocol protocol protocol protocol protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr><tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial#101291031813</td>
- <td>protocol protocol protocol protocol protocol protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr><tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial#101291031813</td>
- <td>protocol protocol protocol protocol protocol protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr><tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial#101291031813</td>
- <td>protocol protocol protocol protocol protocol protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr><tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr><tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial#101291031813</td>
- <td>protocol protocol protocol protocol protocol protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr>
- <tr>
- <td>id</td>
- <td>mfr</td>
- <td>hw</td>
- <td>sw</td>
- <td>serial</td>
- <td>protocol</td>
- </tr>
- </tbody>
- </table>
+ <div id="tableDiv" ng-controller="showTableCtrl as ctrl">
</div>
</body>
diff --git a/web/gui/src/main/webapp/_bripc/practice-table.js b/web/gui/src/main/webapp/_bripc/practice-table.js
index b2b892c..4de9112 100644
--- a/web/gui/src/main/webapp/_bripc/practice-table.js
+++ b/web/gui/src/main/webapp/_bripc/practice-table.js
@@ -23,8 +23,8 @@
var config = {
colIds: ['_iconid_available', 'id', 'mfr', 'hw', 'sw', 'serial',
- 'annotations.protocol'],
- colText: ['', 'URI', 'Vendor', 'Hardware Version', 'Software Version',
+ 'annotations'],
+ colText: ['Availability', 'URI', 'Vendor', 'Hardware Version', 'Software Version',
'Serial Number', 'Protocol']
},
deviceData = {
@@ -39,8 +39,8 @@
"serial": "None",
"annotations": {
"protocol": "OF_10"
- }
- },
+ }
+ },
{
"id": "of:0000000000000004",
"available": false,
@@ -66,6 +66,136 @@
"annotations": {
"protocol": "OF_10"
}
+ },
+ {
+ "id": "of:0000000000000092",
+ "available": false,
+ "_iconid_available": "deviceOffline",
+ "role": "MASTER",
+ "mfr": "Nicira, Inc.",
+ "hw": "Open vSwitch",
+ "sw": "2.0.1",
+ "serial": "None",
+ "annotations": {
+ "protocol": "OF_10"
+ }
+ },
+ {
+ "id": "of:0000000000000092",
+ "available": false,
+ "_iconid_available": "deviceOffline",
+ "role": "MASTER",
+ "mfr": "Nicira, Inc.",
+ "hw": "Open vSwitch",
+ "sw": "2.0.1",
+ "serial": "None",
+ "annotations": {
+ "protocol": "OF_10"
+ }
+ },
+ {
+ "id": "of:0000000000000092",
+ "available": false,
+ "_iconid_available": "deviceOffline",
+ "role": "MASTER",
+ "mfr": "Nicira, Inc.",
+ "hw": "Open vSwitch",
+ "sw": "2.0.1",
+ "serial": "None",
+ "annotations": {
+ "protocol": "OF_10"
+ }
+ },
+ {
+ "id": "of:0000000000000092",
+ "available": false,
+ "_iconid_available": "deviceOffline",
+ "role": "MASTER",
+ "mfr": "Nicira, Inc.",
+ "hw": "Open vSwitch",
+ "sw": "2.0.1",
+ "serial": "None",
+ "annotations": {
+ "protocol": "OF_10"
+ }
+ },
+ {
+ "id": "of:0000000000000092",
+ "available": false,
+ "_iconid_available": "deviceOffline",
+ "role": "MASTER",
+ "mfr": "Nicira, Inc.",
+ "hw": "Open vSwitch",
+ "sw": "2.0.1",
+ "serial": "None",
+ "annotations": {
+ "protocol": "OF_10"
+ }
+ },
+ {
+ "id": "of:0000000000000092",
+ "available": false,
+ "_iconid_available": "deviceOffline",
+ "role": "MASTER",
+ "mfr": "Nicira, Inc.",
+ "hw": "Open vSwitch",
+ "sw": "2.0.1",
+ "serial": "None",
+ "annotations": {
+ "protocol": "OF_10"
+ }
+ },
+ {
+ "id": "of:0000000000000092",
+ "available": false,
+ "_iconid_available": "deviceOffline",
+ "role": "MASTER",
+ "mfr": "Nicira, Inc.",
+ "hw": "Open vSwitch",
+ "sw": "2.0.1",
+ "serial": "None",
+ "annotations": {
+ "protocol": "OF_10"
+ }
+ },
+ {
+ "id": "of:0000000000000092",
+ "available": false,
+ "_iconid_available": "deviceOffline",
+ "role": "MASTER",
+ "mfr": "Nicira, Inc.",
+ "hw": "Open vSwitch",
+ "sw": "2.0.1",
+ "serial": "None",
+ "annotations": {
+ "protocol": "OF_10"
+ }
+ },
+ {
+ "id": "of:0000000000000092",
+ "available": false,
+ "_iconid_available": "deviceOffline",
+ "role": "MASTER",
+ "mfr": "Nicira, Inc.",
+ "hw": "Open vSwitch",
+ "sw": "2.0.1",
+ "serial": "None",
+ "annotations": {
+ "protocol": "OF_10"
+ }
+ },
+ {
+ "id": "of:0000000000000092",
+ "available": false,
+ "_iconid_available": "deviceOffline",
+ "role": "MASTER",
+ "mfr": "Nicira, Inc.",
+ "hw": "Open vSwitch",
+ "sw": "2.0.1",
+ "serial": "None",
+ "annotations": {
+ "protocol": "OF_10"
+ }
}]
};
@@ -90,7 +220,7 @@
function setCSS(thead, tbody, height) {
thead.style('display', 'block');
tbody.style({'display': 'block',
- 'height': height || '500px',
+ 'height': height || '100px',
'overflow': 'auto'
});
}
@@ -100,7 +230,12 @@
setCSS(th, tb, height);
}
- angular.module('practiceTable', [])
+ angular.module('practiceTable', ['onosWidget'])
+
+ .controller('showTableCtrl', ['$log', 'TableService',
+ function ($log, ts) {
+ ts.renderAndLoadTable(d3.select('#tableDiv'), config, deviceData);
+ }])
.directive('fixedHeader', ['$log', '$timeout', function ($log, $timeout) {
return {
@@ -113,6 +248,7 @@
var table = d3.select(element[0]),
thead = table.select('thead'),
tbody = table.select('tbody');
+ $log.log('in directive function');
// wait until the table is visible
scope.$watch(