홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
b3a6afeb 1 parent 36c9d2c1

GUI -- Resizing tabular view refactor and minor CSS edits. App View auto-refreshes by default again. 

Change-Id: I362733996c340ed9fd5d674534c29181b7015410
Inline Side-by-side
Showing 17 changed files with 107 additions and 126 deletions
......@@ -79,14 +79,5 @@
});
}
};
}])
// create a general ng-repeat complete notifier directive
.directive('ngRepeatDone', [function () {
return function (scope) {
if (scope.$last) {
scope.$emit('LastElement');
}
};
}]);
}());
......
......@@ -35,30 +35,17 @@
// 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 adjustTable(table, width, height) {
var thead = table.select('.table-header').select('table'),
tbodyDiv = table.select('.table-body'),
tbody = tbodyDiv.select('table'),
cstmWidths = {};
function findCstmWidths() {
var headers = thead.selectAll('td');
function findCstmWidths(table) {
var headers = table.select('.table-header').selectAll('td');
headers.each(function (d, i) {
var h = d3.select(this),
......@@ -75,8 +62,8 @@
}
}
function setTdWidths(elem) {
var tds = elem.selectAll('tr:not(.ignore-width)').selectAll('td');
function setTdWidths(elem, width) {
var tds = elem.select('tr:first-child').selectAll('td');
_width(elem, width + 'px');
tds.each(function (d, i) {
......@@ -88,19 +75,22 @@
});
}
function setHeight(body) {
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');
}
findCstmWidths();
setTdWidths(thead);
setTdWidths(tbody);
setHeight(tbodyDiv);
cstmWidths = {};
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');
}
}
// 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;
if (!scope.tableData.length) {
defaultSize(table, wWidth);
}
wsz = fs.windowSize(0, 30);
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;
// adjust table when data changes
scope.$watchCollection('tableData', function () {
adjustTable(
scope.tableData.length,
tableElems,
wsz.width, wsz.height
);
});
if (canAdjust) {
adjustTable(table, wWidth, wHeight);
}
scope.$on('$destroy', function () {
cstmWidths = {};
});
};
}])
......
......@@ -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>
......
......@@ -63,7 +63,6 @@
selCb: selCb,
respCb: refreshCtrls
});
$scope.toggleRefresh();
$scope.appAction = function (action) {
if ($scope.ctrlBtnState.selection) {
......
......@@ -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>
......
......@@ -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>
......
......@@ -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;
}
......
......@@ -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>
......
......@@ -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;
}
......
......@@ -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>
......
......@@ -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>
......
......@@ -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;
}
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
......
......@@ -135,7 +135,7 @@ html[data-platform='iPad'] #topo-p-detail {
.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 @@ html[data-platform='iPad'] #topo-p-detail {
.topo-p h3 {
padding: 0 4px;
margin: 0;
word-break: break-all;
word-wrap: break-word;
top: 20px;
left: 50px;
}
......@@ -167,7 +167,7 @@ html[data-platform='iPad'] #topo-p-detail {
}
.topo-p td {
word-break: break-all;
word-wrap: break-word;
}
.topo-p td.label {
font-style: italic;
......