GUI -- Resizing tabular view refactor and minor CSS edits. App View auto-refreshes by default again.
Change-Id: I362733996c340ed9fd5d674534c29181b7015410
diff --git a/web/gui/src/main/webapp/app/directives.js b/web/gui/src/main/webapp/app/directives.js
index bac559b..98aef8e 100644
--- a/web/gui/src/main/webapp/app/directives.js
+++ b/web/gui/src/main/webapp/app/directives.js
@@ -79,14 +79,5 @@
});
}
};
- }])
-
- // create a general ng-repeat complete notifier directive
- .directive('ngRepeatDone', [function () {
- return function (scope) {
- if (scope.$last) {
- scope.$emit('LastElement');
- }
- };
}]);
}());
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 adae2d0..9bdf1c1 100644
--- a/web/gui/src/main/webapp/app/fw/widget/table.js
+++ b/web/gui/src/main/webapp/app/fw/widget/table.js
@@ -35,72 +35,62 @@
// internal state
var currCol = {},
prevCol = {},
+ cstmWidths = {},
sortIconAPI;
- // Functions for creating a scrolling table body with fixed table header
+ // Functions for resizing a tabular view to the window
function _width(elem, width) {
elem.style('width', width);
}
- function defaultSize(table, width) {
- var thead = table.select('.table-header').select('table'),
- tbody = table.select('.table-body').select('table'),
- wpx = width + 'px';
- _width(thead, wpx);
- _width(tbody, wpx);
+ function findCstmWidths(table) {
+ var headers = table.select('.table-header').selectAll('td');
+
+ headers.each(function (d, i) {
+ var h = d3.select(this),
+ index = i.toString();
+ if (h.classed(tableIcon)) {
+ cstmWidths[index] = tableIconTdSize + 'px';
+ }
+ if (h.attr(colWidth)) {
+ cstmWidths[index] = h.attr(colWidth);
+ }
+ });
+ if (fs.debugOn('widget')) {
+ $log.debug('Headers with custom widths: ', cstmWidths);
+ }
}
- function adjustTable(table, width, height) {
- var thead = table.select('.table-header').select('table'),
- tbodyDiv = table.select('.table-body'),
- tbody = tbodyDiv.select('table'),
- cstmWidths = {};
+ function setTdWidths(elem, width) {
+ var tds = elem.select('tr:first-child').selectAll('td');
+ _width(elem, width + 'px');
- function findCstmWidths() {
- var headers = thead.selectAll('td');
-
- headers.each(function (d, i) {
- var h = d3.select(this),
- index = i.toString();
- if (h.classed(tableIcon)) {
- cstmWidths[index] = tableIconTdSize + 'px';
- }
- if (h.attr(colWidth)) {
- cstmWidths[index] = h.attr(colWidth);
- }
- });
- if (fs.debugOn('widget')) {
- $log.debug('Headers with custom widths: ', cstmWidths);
+ tds.each(function (d, i) {
+ var td = d3.select(this),
+ index = i.toString();
+ if (cstmWidths.hasOwnProperty(index)) {
+ _width(td, cstmWidths[index]);
}
+ });
+ }
+
+ function setHeight(thead, body, height) {
+ var h = height - (mast.mastHeight() +
+ fs.noPxStyle(d3.select('.tabular-header'), 'height') +
+ fs.noPxStyle(thead, 'height') + pdg);
+ body.style('height', h + 'px');
+ }
+
+ function adjustTable(haveItems, tableElems, width, height) {
+ if (haveItems) {
+ setTdWidths(tableElems.thead, width);
+ setTdWidths(tableElems.tbody, width);
+ setHeight(tableElems.thead, tableElems.table.select('.table-body'), height);
+ } else {
+ setTdWidths(tableElems.thead, width);
+ _width(tableElems.tbody, width + 'px');
}
-
- function setTdWidths(elem) {
- var tds = elem.selectAll('tr:not(.ignore-width)').selectAll('td');
- _width(elem, width + 'px');
-
- tds.each(function (d, i) {
- var td = d3.select(this),
- index = i.toString();
- if (cstmWidths.hasOwnProperty(index)) {
- _width(td, cstmWidths[index]);
- }
- });
- }
-
- function setHeight(body) {
- var h = height - (mast.mastHeight() +
- fs.noPxStyle(d3.select('.tabular-header'), 'height') +
- fs.noPxStyle(thead, 'height') + pdg);
- body.style('height', h + 'px');
- }
-
- findCstmWidths();
- setTdWidths(thead);
- setTdWidths(tbody);
- setHeight(tbodyDiv);
-
- cstmWidths = {};
}
// Functions for sorting table rows by header
@@ -147,7 +137,7 @@
}
angular.module('onosWidget')
- .directive('onosFixedHeader', ['$log','$window',
+ .directive('onosTableResize', ['$log','$window',
'FnService', 'MastService',
function (_$log_, _$window_, _fs_, _mast_) {
@@ -158,31 +148,41 @@
mast = _mast_;
var table = d3.select(element[0]),
- canAdjust = false;
+ tableElems = {
+ table: table,
+ thead: table.select('.table-header').select('table'),
+ tbody: table.select('.table-body').select('table')
+ },
+ wsz;
+ findCstmWidths(table);
+
+ // adjust table on window resize
scope.$watchCollection(function () {
return {
h: $window.innerHeight,
w: $window.innerWidth
};
}, function () {
- var wsz = fs.windowSize(0, 30),
- wWidth = wsz.width,
- wHeight = wsz.height;
+ wsz = fs.windowSize(0, 30);
+ adjustTable(
+ scope.tableData.length,
+ tableElems,
+ wsz.width, wsz.height
+ );
+ });
- if (!scope.tableData.length) {
- defaultSize(table, wWidth);
- }
+ // adjust table when data changes
+ scope.$watchCollection('tableData', function () {
+ adjustTable(
+ scope.tableData.length,
+ tableElems,
+ wsz.width, wsz.height
+ );
+ });
- scope.$on('LastElement', function () {
- // only adjust the table once it's completely loaded
- adjustTable(table, wWidth, wHeight);
- canAdjust = true;
- });
-
- if (canAdjust) {
- adjustTable(table, wWidth, wHeight);
- }
+ scope.$on('$destroy', function () {
+ cstmWidths = {};
});
};
}])
diff --git a/web/gui/src/main/webapp/app/view/app/app.html b/web/gui/src/main/webapp/app/view/app/app.html
index f2e4dd3..8bfd202 100644
--- a/web/gui/src/main/webapp/app/view/app/app.html
+++ b/web/gui/src/main/webapp/app/view/app/app.html
@@ -31,7 +31,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -50,16 +50,15 @@
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="5">
No Applications found
</td>
</tr>
- <tr ng-repeat="app in tableData"
+ <tr ng-repeat="app in tableData track by $index"
ng-click="selectCallback($event, app)"
- ng-class="{selected: app.id === selId}"
- ng-repeat-done>
+ ng-class="{selected: app.id === selId}">
<td class="table-icon">
<div icon icon-id="{{app._iconid_state}}"></div>
</td>
diff --git a/web/gui/src/main/webapp/app/view/app/app.js b/web/gui/src/main/webapp/app/view/app/app.js
index 764447e..55ccd94 100644
--- a/web/gui/src/main/webapp/app/view/app/app.js
+++ b/web/gui/src/main/webapp/app/view/app/app.js
@@ -63,7 +63,6 @@
selCb: selCb,
respCb: refreshCtrls
});
- $scope.toggleRefresh();
$scope.appAction = function (action) {
if ($scope.ctrlBtnState.selection) {
diff --git a/web/gui/src/main/webapp/app/view/cluster/cluster.html b/web/gui/src/main/webapp/app/view/cluster/cluster.html
index 8750cac..e1db4ee 100644
--- a/web/gui/src/main/webapp/app/view/cluster/cluster.html
+++ b/web/gui/src/main/webapp/app/view/cluster/cluster.html
@@ -25,7 +25,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -44,14 +44,13 @@
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="5">
No Cluster Nodes found
</td>
</tr>
- <tr ng-repeat="node in tableData"
- ng-repeat-done>
+ <tr ng-repeat="node in tableData track by $index">
<td class="table-icon">
<div icon icon-id="{{node._iconid_state}}"></div>
</td>
diff --git a/web/gui/src/main/webapp/app/view/device/device.html b/web/gui/src/main/webapp/app/view/device/device.html
index 364efc2..564d6c4 100644
--- a/web/gui/src/main/webapp/app/view/device/device.html
+++ b/web/gui/src/main/webapp/app/view/device/device.html
@@ -9,7 +9,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -32,16 +32,15 @@
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="9">
No Devices found
</td>
</tr>
- <tr ng-repeat="dev in tableData track by dev.id"
+ <tr ng-repeat="dev in tableData track by $index"
ng-click="selectCallback($event, dev)"
- ng-class="{selected: dev.id === selId}"
- ng-repeat-done>
+ ng-class="{selected: dev.id === selId}">
<td class="table-icon">
<div icon icon-id="{{dev._iconid_available}}"></div>
</td>
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.css b/web/gui/src/main/webapp/app/view/flow/flow.css
index 3e5cb2c..b1fe49d 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.css
+++ b/web/gui/src/main/webapp/app/view/flow/flow.css
@@ -26,24 +26,24 @@
width: 45px;
}
+.light #ov-flow tr:nth-child(6n + 1),
.light #ov-flow tr:nth-child(6n + 2),
-.light #ov-flow tr:nth-child(6n + 3),
-.light #ov-flow tr:nth-child(6n + 4) {
+.light #ov-flow tr:nth-child(6n + 3) {
background-color: #eee;
}
+.light #ov-flow tr:nth-child(6n + 4),
.light #ov-flow tr:nth-child(6n + 5),
-.light #ov-flow tr:nth-child(6n + 6),
-.light #ov-flow tr:nth-child(6n + 1) {
+.light #ov-flow tr:nth-child(6n) {
background-color: #ddd;
}
+.dark #ov-flow tr:nth-child(6n + 1),
.dark #ov-flow tr:nth-child(6n + 2),
-.dark #ov-flow tr:nth-child(6n + 3),
-.dark #ov-flow tr:nth-child(6n + 4) {
+.dark #ov-flow tr:nth-child(6n + 3) {
background-color: #444;
}
+.dark #ov-flow tr:nth-child(6n + 4),
.dark #ov-flow tr:nth-child(6n + 5),
-.dark #ov-flow tr:nth-child(6n + 6),
-.dark #ov-flow tr:nth-child(6n + 1) {
+.dark #ov-flow tr:nth-child(6n) {
background-color: #333;
}
diff --git a/web/gui/src/main/webapp/app/view/flow/flow.html b/web/gui/src/main/webapp/app/view/flow/flow.html
index a79e925..38059cd 100644
--- a/web/gui/src/main/webapp/app/view/flow/flow.html
+++ b/web/gui/src/main/webapp/app/view/flow/flow.html
@@ -12,7 +12,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -36,13 +36,13 @@
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="10">
No Flows found
</td>
</tr>
- <tr ng-repeat-start="flow in tableData">
+ <tr ng-repeat-start="flow in tableData track by $index">
<td>{{flow.id}}</td>
<td>{{flow.appId}}</td>
<td>{{flow.groupId}}</td>
@@ -54,11 +54,10 @@
<td>{{flow.packets}}</td>
<td>{{flow.bytes}}</td>
</tr>
- <tr class="ignore-width">
+ <tr>
<td class="selector" colspan="10">{{flow.selector}}</td>
</tr>
- <tr class="ignore-width"
- ng-repeat-end ng-repeat-done>
+ <tr ng-repeat-end>
<td class="treatment" colspan="10">{{flow.treatment}}</td>
</tr>
</table>
diff --git a/web/gui/src/main/webapp/app/view/group/group.css b/web/gui/src/main/webapp/app/view/group/group.css
index 8553ddc..182f44c 100644
--- a/web/gui/src/main/webapp/app/view/group/group.css
+++ b/web/gui/src/main/webapp/app/view/group/group.css
@@ -26,20 +26,20 @@
width: 45px;
}
-.light #ov-group tr:nth-child(4n + 2),
-.light #ov-group tr:nth-child(4n + 3) {
+.light #ov-group tr:nth-child(4n + 1),
+.light #ov-group tr:nth-child(4n + 2) {
background-color: #eee;
}
-.light #ov-group tr:nth-child(4n + 4),
-.light #ov-group tr:nth-child(4n + 1) {
+.light #ov-group tr:nth-child(4n + 3),
+.light #ov-group tr:nth-child(4n) {
background-color: #ddd;
}
-.dark #ov-group tr:nth-child(4n + 2),
-.dark #ov-group tr:nth-child(4n + 3) {
+.dark #ov-group tr:nth-child(4n + 1),
+.dark #ov-group tr:nth-child(4n + 2) {
background-color: #444;
}
-.dark #ov-group tr:nth-child(4n + 4),
-.dark #ov-group tr:nth-child(4n + 1) {
+.dark #ov-group tr:nth-child(4n + 3),
+.dark #ov-group tr:nth-child(4n) {
background-color: #333;
}
diff --git a/web/gui/src/main/webapp/app/view/group/group.html b/web/gui/src/main/webapp/app/view/group/group.html
index 22cd5ee..a2b38e0 100644
--- a/web/gui/src/main/webapp/app/view/group/group.html
+++ b/web/gui/src/main/webapp/app/view/group/group.html
@@ -28,7 +28,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -48,13 +48,13 @@
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="6">
No Groups found
</td>
</tr>
- <tr ng-repeat-start="group in tableData">
+ <tr ng-repeat-start="group in tableData track by $index">
<td>{{group.id}}</td>
<td>{{group.app_id}}</td>
<td>{{group.state}}</td>
@@ -62,8 +62,7 @@
<td>{{group.packets}}</td>
<td>{{group.bytes}}</td>
</tr>
- <tr class="ignore-width"
- ng-repeat-end ng-repeat-done>
+ <tr ng-repeat-end>
<td class="buckets" colspan="6"
ng-bind-html="group.buckets"></td>
</tr>
diff --git a/web/gui/src/main/webapp/app/view/host/host.html b/web/gui/src/main/webapp/app/view/host/host.html
index ad0e77e..0baeccd 100644
--- a/web/gui/src/main/webapp/app/view/host/host.html
+++ b/web/gui/src/main/webapp/app/view/host/host.html
@@ -9,7 +9,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -29,14 +29,13 @@
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="6">
No Hosts found
</td>
</tr>
- <tr ng-repeat="host in tableData"
- ng-repeat-done>
+ <tr ng-repeat="host in tableData track by $index">
<td class="table-icon">
<div icon icon-id="{{host._iconid_type}}"></div>
</td>
diff --git a/web/gui/src/main/webapp/app/view/intent/intent.css b/web/gui/src/main/webapp/app/view/intent/intent.css
index 49bfc18..9f9923b 100644
--- a/web/gui/src/main/webapp/app/view/intent/intent.css
+++ b/web/gui/src/main/webapp/app/view/intent/intent.css
@@ -26,24 +26,24 @@
width: 45px;
}
+.light #ov-intent tr:nth-child(6n + 1),
.light #ov-intent tr:nth-child(6n + 2),
-.light #ov-intent tr:nth-child(6n + 3),
-.light #ov-intent tr:nth-child(6n + 4) {
+.light #ov-intent tr:nth-child(6n + 3) {
background-color: #eee;
}
+.light #ov-intent tr:nth-child(6n + 4),
.light #ov-intent tr:nth-child(6n + 5),
-.light #ov-intent tr:nth-child(6n + 6),
-.light #ov-intent tr:nth-child(6n + 1) {
+.light #ov-intent tr:nth-child(6n) {
background-color: #ddd;
}
+.dark #ov-intent tr:nth-child(6n + 1),
.dark #ov-intent tr:nth-child(6n + 2),
-.dark #ov-intent tr:nth-child(6n + 3),
-.dark #ov-intent tr:nth-child(6n + 4) {
+.dark #ov-intent tr:nth-child(6n + 3) {
background-color: #444;
}
+.dark #ov-intent tr:nth-child(6n + 4),
.dark #ov-intent tr:nth-child(6n + 5),
-.dark #ov-intent tr:nth-child(6n + 6),
-.dark #ov-intent tr:nth-child(6n + 1) {
+.dark #ov-intent tr:nth-child(6n) {
background-color: #333;
}
diff --git a/web/gui/src/main/webapp/app/view/intent/intent.html b/web/gui/src/main/webapp/app/view/intent/intent.html
index e60e788..9c754fd 100644
--- a/web/gui/src/main/webapp/app/view/intent/intent.html
+++ b/web/gui/src/main/webapp/app/view/intent/intent.html
@@ -25,7 +25,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -44,13 +44,13 @@
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="5">
No Intents found
</td>
</tr>
- <tr ng-repeat-start="intent in tableData">
+ <tr ng-repeat-start="intent in tableData track by $index">
<td>{{intent.appId}}</td>
<td>{{intent.key}}</td>
<td>{{intent.type}}</td>
@@ -60,7 +60,7 @@
<tr>
<td class="resources" colspan="5">{{intent.resources}}</td>
</tr>
- <tr ng-repeat-end ng-repeat-done>
+ <tr ng-repeat-end>
<td class="details" colspan="5">{{intent.details}}</td>
</tr>
</table>
diff --git a/web/gui/src/main/webapp/app/view/link/link.html b/web/gui/src/main/webapp/app/view/link/link.html
index dd1f534..1431772 100644
--- a/web/gui/src/main/webapp/app/view/link/link.html
+++ b/web/gui/src/main/webapp/app/view/link/link.html
@@ -25,7 +25,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -45,14 +45,13 @@
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="6">
No Links found
</td>
</tr>
- <tr ng-repeat="link in tableData"
- ng-repeat-done>
+ <tr ng-repeat="link in tableData track by $index">
<td class="table-icon">
<div icon icon-id="{{link._iconid_state}}"></div>
</td>
diff --git a/web/gui/src/main/webapp/app/view/port/port.html b/web/gui/src/main/webapp/app/view/port/port.html
index 3e93eb3..5e48cbf 100644
--- a/web/gui/src/main/webapp/app/view/port/port.html
+++ b/web/gui/src/main/webapp/app/view/port/port.html
@@ -28,7 +28,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -50,14 +50,13 @@
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="8">
No Ports found
</td>
</tr>
- <tr ng-repeat="port in tableData"
- ng-repeat-done>
+ <tr ng-repeat="port in tableData track by $index">
<td>{{port.id}}</td>
<td>{{port.pkt_rx}}</td>
<td>{{port.pkt_tx}}</td>
diff --git a/web/gui/src/main/webapp/app/view/settings/settings.html b/web/gui/src/main/webapp/app/view/settings/settings.html
index 2c89984..c5d87ba 100644
--- a/web/gui/src/main/webapp/app/view/settings/settings.html
+++ b/web/gui/src/main/webapp/app/view/settings/settings.html
@@ -9,7 +9,7 @@
</div>
</div>
- <div class="summary-list" onos-fixed-header>
+ <div class="summary-list" onos-table-resize>
<div class="table-header"
onos-sortable-header
@@ -17,26 +17,25 @@
sort-callback="sortCallback(sortParams)">
<table>
<tr>
- <td colId="component" sortable col-width="350px">Component </td>
+ <td colId="component" sortable col-width="200px">Component </td>
<td colId="id" sortable>Property </td>
<td colId="type" sortable col-width="70px">Type </td>
<td colId="value" sortable>Value </td>
<td colId="defValue" sortable>Default </td>
- <td colId="desc" col-width="520px">Description </td>
+ <td colId="desc" col-width="400px">Description </td>
</tr>
</table>
</div>
<div class="table-body">
<table>
- <tr ng-hide="tableData.length" class="no-data ignore-width">
+ <tr ng-if="!tableData.length" class="no-data">
<td colspan="6">
No Settings found
</td>
</tr>
- <tr ng-repeat="prop in tableData"
- ng-repeat-done>
+ <tr ng-repeat="prop in tableData track by $index">
<td>{{prop.component}}</td>
<td>{{prop.id}}</td>
<td>{{prop.type}}</td>
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
index 4c2e256..c76d9d5 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -135,7 +135,7 @@
.topo-p h2 {
padding: 0 4px;
margin: 0;
- word-break: break-all;
+ word-wrap: break-word;
display: inline-block;
width: 210px;
vertical-align: middle;
@@ -150,7 +150,7 @@
.topo-p h3 {
padding: 0 4px;
margin: 0;
- word-break: break-all;
+ word-wrap: break-word;
top: 20px;
left: 50px;
}
@@ -167,7 +167,7 @@
}
.topo-p td {
- word-break: break-all;
+ word-wrap: break-word;
}
.topo-p td.label {
font-style: italic;