From b3a6afeb5eb66b73703302a66f8847089cdd3e35 Mon Sep 17 00:00:00 2001 From: Bri Prebilic Cole Date: Wed, 24 Jun 2015 14:10:41 -0700 Subject: [PATCH] GUI -- Resizing tabular view refactor and minor CSS edits. App View auto-refreshes by default again. Change-Id: I362733996c340ed9fd5d674534c29181b7015410 --- web/gui/src/main/webapp/app/directives.js | 9 -- .../src/main/webapp/app/fw/widget/table.js | 142 +++++++++--------- web/gui/src/main/webapp/app/view/app/app.html | 9 +- web/gui/src/main/webapp/app/view/app/app.js | 1 - .../main/webapp/app/view/cluster/cluster.html | 7 +- .../main/webapp/app/view/device/device.html | 9 +- .../src/main/webapp/app/view/flow/flow.css | 16 +- .../src/main/webapp/app/view/flow/flow.html | 11 +- .../src/main/webapp/app/view/group/group.css | 16 +- .../src/main/webapp/app/view/group/group.html | 9 +- .../src/main/webapp/app/view/host/host.html | 7 +- .../main/webapp/app/view/intent/intent.css | 16 +- .../main/webapp/app/view/intent/intent.html | 8 +- .../src/main/webapp/app/view/link/link.html | 7 +- .../src/main/webapp/app/view/port/port.html | 7 +- .../webapp/app/view/settings/settings.html | 11 +- .../src/main/webapp/app/view/topo/topo.css | 6 +- 17 files changed, 136 insertions(+), 155 deletions(-) diff --git a/web/gui/src/main/webapp/app/directives.js b/web/gui/src/main/webapp/app/directives.js index bac559bbb5..98aef8ee50 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 adae2d02df..9bdf1c1c01 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 f2e4dd3023..8bfd20276b 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 @@ -
+
- + - + ng-class="{selected: app.id === selId}"> 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 764447e260..55ccd948ae 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 8750cac359..e1db4eefc7 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 @@ -
+
No Applications found
- + - + 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 364efc25da..564d6c48cc 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 @@ -
+
No Cluster Nodes found
- + - + ng-class="{selected: dev.id === selId}"> 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 3e5cb2ccf9..b1fe49d7db 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 a79e925215..38059cdb7e 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 @@ -
+
No Devices found
- + - + @@ -54,11 +54,10 @@ - + - +
No Flows found
{{flow.id}} {{flow.appId}} {{flow.groupId}}{{flow.packets}} {{flow.bytes}}
{{flow.selector}}
{{flow.treatment}}
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 8553ddc361..182f44c177 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 22cd5eead3..a2b38e0724 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 @@
-
+
- + - + @@ -62,8 +62,7 @@ - + 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 ad0e77ecab..0baeccd2ce 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 @@ -
+
No Groups found
{{group.id}} {{group.app_id}} {{group.state}}{{group.packets}} {{group.bytes}}
- + - + 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 49bfc1861f..9f9923b390 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 e60e788310..9c754fdb4c 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 @@ -
+
No Hosts found
- + - + @@ -60,7 +60,7 @@ - +
No Intents found
{{intent.appId}} {{intent.key}} {{intent.type}}
{{intent.resources}}
{{intent.details}}
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 dd1f534046..14317723e5 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 @@
-
+
- + - + 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 3e93eb3925..5e48cbffa9 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 @@ -
+
No Links found
- + - + 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 2c89984fe3..c5d87ba39c 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 @@ -
+
No Ports found
{{port.id}} {{port.pkt_rx}} {{port.pkt_tx}}
- + - +
Component Component Property Type Value Default Description Description
- + - + 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 4c2e256f03..c76d9d50e4 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 @@ 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;
No Settings found
{{prop.component}} {{prop.id}} {{prop.type}}