mirrors/onos
1
0
Fork 0
mirror of https://github.com/opennetworkinglab/onos.git synced 2025-10-22 04:40:59 +02:00
Code Issues Projects Releases Wiki Activity

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.

Browse Source 
Change-Id: I95f82108d7bb4f84a701b49e0e419afbdbac6f14
This commit is contained in:
Bri Prebilic Cole 2015-01-23 16:53:29 -08:00 committed by Ray Milkey
parent 9ea3e6f477
commit aa8d2ed957
4 changed files with 209 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
web/gui/src/main/webapp/_bripc/practice-table.js
View File

@ -21,6 +21,54 @@
(function () {
'use strict';
var config = {
colIds: ['_iconid_available', 'id', 'mfr', 'hw', 'sw', 'serial',
'annotations.protocol'],
colText: ['', 'URI', 'Vendor', 'Hardware Version', 'Software Version',
'Serial Number', 'Protocol']
},
deviceData = {
"devices": [{
"id": "of:0000000000000001",
"available": true,
"_iconid_available": "deviceOnline",
"role": "MASTER",
"mfr": "Nicira, Inc.",
"hw": "Open vSwitch",
"sw": "2.0.1",
"serial": "None",
"annotations": {
"protocol": "OF_10"
}
},
{
"id": "of:0000000000000004",
"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"
}
}]
};
function setColWidth(t) {
var tHeaders, tdElement, colWidth;
@ -84,4 +132,4 @@
}
};
}]);
}());
}());

58
web/gui/src/main/webapp/app/fw/widget/table.js
View File

@ -22,12 +22,68 @@
var $log;
function renderTable(div, config) {
var table = div.append('table').attr('fixed-header', true),
thead, tr, numTableCols, i;
table.append('thead');
table.append('tbody');
thead = table.select('thead');
tr = thead.append('tr');
numTableCols = config.colIds.length;
for(i = 0; i < numTableCols; i += 1) {
tr.append('th').html(config.colText[i]);
}
return config.colIds;
}
// I can delete these comments later...
// loadTableData needs to know which IDs are used to create the table...
// Potentially, there will be some rows in the JSON that the server is
// sending back that will be unused. We don't want to create unneeded rows.
// For example, in device view, we aren't displaying "role" or
// "available" properties, but they would be displayed if we took it
// directly from the data being sent in.
function loadTableData(data, div, colIds) {
// let me know if you have suggestions for this function
var numTableCols = colIds.length,
tbody, tr, td, 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
(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]);
}
}
}
});
}
function renderAndLoadTable(div, config, data) {
loadTableData(data, div, (renderTable(div, config)));
}
angular.module('onosWidget')
.factory('TableService', ['$log', function (_$log_) {
$log = _$log_;
return {
renderTable: renderTable,
loadTableData: loadTableData,
renderAndLoadTable: renderAndLoadTable
};
}]);

1
web/gui/src/main/webapp/app/view/device/device.html
View File

@ -1,7 +1,6 @@
<!-- Device partial HTML -->
<div id="ov-device">
<h2>Device View</h2>
<!-- TODO: uncomment and test the thead and tbody tags for CSS styling -->
<table class="summary-list">
<tbody>
<tr>

105
web/gui/src/main/webapp/tests/app/fw/widget/table-spec.js
View File

@ -18,7 +18,54 @@
ONOS GUI -- Widget -- Table Service - Unit Tests
*/
describe('factory: fw/widget/table.js', function() {
var ts, $log;
var ts, $log, d3Elem;
var config = {
colIds: ['id', 'mfr', 'hw', 'sw', 'serial', 'annotations.protocol'],
colText: ['URI', 'Vendor', 'Hardware Version', 'Software Version',
'Serial Number', 'Protocol']
},
fakeData = {
"devices": [{
"id": "of:0000000000000001",
"available": true,
"_iconid_available": "deviceOnline",
"role": "MASTER",
"mfr": "Nicira, Inc.",
"hw": "Open vSwitch",
"sw": "2.0.1",
"serial": "None",
"annotations": {
"protocol": "OF_10"
}
},
{
"id": "of:0000000000000004",
"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"
}
}]
};
beforeEach(module('onosWidget'));
@ -30,4 +77,58 @@ describe('factory: fw/widget/table.js', function() {
it('should define TableService', function () {
expect(ts).toBeDefined();
});
});
function verifyTableTags(div) {
var table = div.select('table'),
tableHeaders;
expect(table).toBeTruthy();
expect(table.attr('fixed-header')).toBeTruthy();
expect(table.select('thead')).toBeTruthy();
expect(table.select('tbody')).toBeTruthy();
tableHeaders = table.select('thead').selectAll('th');
tableHeaders.each(function(thElement, i) {
thElement = d3.select(this);
expect(thElement).toBeTruthy();
expect(thElement.html()).toBe(config.colText[i]);
});
}
function verifyData(div) {
var tbody = div.select('tbody'),
tableBoxes = tbody.selectAll('td');
expect(tbody).toBeTruthy();
expect(tbody.select('tr')).toBeTruthy();
tableBoxes.each(function(tdElement, i){
tdElement = d3.select(this);
if(i === 0) {
expect(tdElement.html()).toBe('of:0000000000000001');
}
if(i === 1) {
expect(tdElement.html()).toBe('Nicira, Inc.');
}
if(i === 2) {
expect(tdElement.html()).toBe('Open vSwitch');
}
expect(tdElement).toBeTruthy();
});
}
it('should create table tags', function () {
ts.renderTable(d3Elem, config);
verifyTableTags(d3Elem);
});
it('should load data into table', function () {
var colIds = ts.renderTable(d3Elem, config);
ts.loadTableData(fakeData, d3Elem, colIds);
verifyData(d3Elem);
});
it('should render table and load data', function () {
ts.renderAndLoadTable(d3Elem, config, fakeData);
verifyData(d3Elem);
});
});