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(
diff --git a/web/gui/src/main/webapp/app/fw/widget/table.js b/web/gui/src/main/webapp/app/fw/widget/table.js
index bd20b9c..52ee86f 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.js
+++ b/web/gui/src/main/webapp/app/fw/widget/table.js
@@ -23,7 +23,7 @@
var $log;
function renderTable(div, config) {
- var table = div.append('table').attr('fixed-header', true),
+ var table = div.append('table').attr('fixed-header', ''),
thead, tr, numTableCols, i;
table.append('thead');
table.append('tbody');
@@ -50,23 +50,17 @@
// let me know if you have suggestions for this function
var numTableCols = colIds.length,
- tbody, tr, td, i;
+ tbody, tr, i;
tbody = div.select('tbody');
// get the array associated with the first object, such as "devices"
- // in fakeData
- // (for some reason it doesn't like the data.keys() function, saying
- // "undefined is not a function"
- // Object.keys(data) works though)
- // loop through every object in the array, and every property in the object
- // put their property in the td of the table
+ // loop through every object in the array, and every colId in config
+ // put the appropriate property in the td of the table
(data[Object.keys(data)[0]]).forEach(function (item) {
tr = tbody.append('tr');
- for(var key in item) {
- for(i = 0; i < numTableCols; i += 1) {
- if(key === colIds[i]) {
- td = tr.append('td').html(item[key]);
- }
+ for(i = 0; i < numTableCols; i += 1) {
+ if(item.hasOwnProperty(colIds[i])) {
+ tr.append('td').html(item[colIds[i]]);
}
}
});
diff --git a/web/gui/src/main/webapp/tests/app/fw/widget/table-spec.js b/web/gui/src/main/webapp/tests/app/fw/widget/table-spec.js
index 1e853c0..fcabb2e 100644
--- a/web/gui/src/main/webapp/tests/app/fw/widget/table-spec.js
+++ b/web/gui/src/main/webapp/tests/app/fw/widget/table-spec.js
@@ -37,8 +37,8 @@
"serial": "None",
"annotations": {
"protocol": "OF_10"
- }
- },
+ }
+ },
{
"id": "of:0000000000000004",
"available": false,
@@ -79,7 +79,6 @@
d3.select('#myDiv').remove();
});
-
it('should define TableService', function () {
expect(ts).toBeDefined();
});
@@ -88,7 +87,7 @@
var table = div.select('table'),
tableHeaders;
expect(table).toBeTruthy();
- expect(table.attr('fixed-header')).toBeTruthy();
+ expect(table.attr('fixed-header')).toBeFalsy();
expect(table.select('thead')).toBeTruthy();
expect(table.select('tbody')).toBeTruthy();