홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
45069388 1 parent c0e37ec9

GUI -- Tabular views have divs that encapsulate the header to make math easier f… 

…or calculating table height. - fixed bug in Device Details Panel where Ports table wouldn't scroll. - Minor refactoring

Change-Id: I2d8133fb4a92f82087566084143c32deb7393fb3
Inline Side-by-side
Showing 9 changed files with 71 additions and 63 deletions
...@@ -18,3 +18,9 @@ ...@@ -18,3 +18,9 @@
18 ONOS GUI -- common -- CSS file 18 ONOS GUI -- common -- CSS file
19 */ 19 */
20 20
21 +#view h2 {
22 + margin: 0;
23 + /* separated out so that other padding doesn't get clobbered */
24 + padding-top: 20px;
25 + padding-bottom: 20px;
26 +}
......
...@@ -25,10 +25,7 @@ ...@@ -25,10 +25,7 @@
25 25
26 // constants 26 // constants
27 var tableIconTdSize = 33, 27 var tableIconTdSize = 33,
28 - mastPdg = 8, 28 + pdg = 12,
29 - h2Pdg = 40,
30 - thPdg = 12,
31 - tbodyPdg = 5,
32 colWidth = 'col-width', 29 colWidth = 'col-width',
33 tableIcon = 'table-icon'; 30 tableIcon = 'table-icon';
34 31
...@@ -100,15 +97,15 @@ ...@@ -100,15 +97,15 @@
100 // get the size of the window and then subtract the extra space at the top 97 // get the size of the window and then subtract the extra space at the top
101 // to get the height of the table 98 // to get the height of the table
102 function setTableHeight(thead, tbody) { 99 function setTableHeight(thead, tbody) {
103 - var titleHeight = h2Pdg + fs.noPxStyle(d3.select('h2'), 'height'), 100 + var ttlHgt = fs.noPxStyle(d3.select('.tabular-header'), 'height'),
104 - thHeight = thPdg + fs.noPxStyle(thead, 'height'), 101 + thHgt = fs.noPxStyle(thead, 'height'),
105 - totalHeight = titleHeight + thHeight + mastPdg - tbodyPdg, 102 + totalHgt = ttlHgt + thHgt + pdg,
106 - tableHeight = fs.windowSize(mast.mastHeight() + totalHeight).height; 103 + tbleHgt = fs.windowSize(mast.mastHeight() + totalHgt).height;
107 104
108 thead.style('display', 'block'); 105 thead.style('display', 'block');
109 tbody.style({ 106 tbody.style({
110 display: 'block', 107 display: 'block',
111 - height: tableHeight + 'px', 108 + height: tbleHgt + 'px',
112 overflow: 'auto' 109 overflow: 'auto'
113 }); 110 });
114 } 111 }
......
1 <!-- app partial HTML --> 1 <!-- app partial HTML -->
2 <div id="ov-app"> 2 <div id="ov-app">
3 - <div> 3 + <div class="tabular-header">
4 <h2>Applications ({{ctrl.tableData.length}} total)</h2> 4 <h2>Applications ({{ctrl.tableData.length}} total)</h2>
5 <div class="ctrl-btns"> 5 <div class="ctrl-btns">
6 <div icon icon-size="36" icon-id="plus"></div> 6 <div icon icon-size="36" icon-id="plus"></div>
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
9 <div icon icon-size="36" icon-id="stop" class="disabled"></div> 9 <div icon icon-size="36" icon-id="stop" class="disabled"></div>
10 </div> 10 </div>
11 </div> 11 </div>
12 +
12 <table class="summary-list" 13 <table class="summary-list"
13 onos-fixed-header 14 onos-fixed-header
14 onos-sortable-header 15 onos-sortable-header
...@@ -44,5 +45,4 @@ ...@@ -44,5 +45,4 @@
44 </tr> 45 </tr>
45 </tbody> 46 </tbody>
46 </table> 47 </table>
47 -
48 </div> 48 </div>
......
...@@ -16,7 +16,10 @@ ...@@ -16,7 +16,10 @@
16 16
17 <!-- Cluster partial HTML --> 17 <!-- Cluster partial HTML -->
18 <div id="ov-cluster"> 18 <div id="ov-cluster">
19 + <div class="tabular-header">
19 <h2>Cluster Nodes ({{ctrl.tableData.length}} total)</h2> 20 <h2>Cluster Nodes ({{ctrl.tableData.length}} total)</h2>
21 + </div>
22 +
20 <table class="summary-list" 23 <table class="summary-list"
21 onos-fixed-header 24 onos-fixed-header
22 onos-sortable-header 25 onos-sortable-header
...@@ -50,5 +53,4 @@ ...@@ -50,5 +53,4 @@
50 </tr> 53 </tr>
51 </tbody> 54 </tbody>
52 </table> 55 </table>
53 -
54 </div> 56 </div>
......
1 <!-- Device partial HTML --> 1 <!-- Device partial HTML -->
2 <div id="ov-device"> 2 <div id="ov-device">
3 + <div class="tabular-header">
3 <h2>Devices ({{ctrl.tableData.length}} total)</h2> 4 <h2>Devices ({{ctrl.tableData.length}} total)</h2>
5 + </div>
6 +
4 <table class="summary-list" 7 <table class="summary-list"
5 onos-fixed-header 8 onos-fixed-header
6 onos-sortable-header 9 onos-sortable-header
...@@ -46,5 +49,4 @@ ...@@ -46,5 +49,4 @@
46 </tr> 49 </tr>
47 </tbody> 50 </tbody>
48 </table> 51 </table>
49 -
50 </div> 52 </div>
......
...@@ -27,19 +27,20 @@ ...@@ -27,19 +27,20 @@
27 // internal state 27 // internal state
28 var self, 28 var self,
29 detailsPanel, 29 detailsPanel,
30 - container, top, bottom, iconDiv, 30 + pStartY, pHeight,
31 - selRow; 31 + top, bottom, iconDiv,
32 + wSize, selRow;
32 33
33 // constants 34 // constants
34 - // TODO: consider having a set y height that all tables start at 35 + var topPdg = 13,
35 - // to make calculations easier 36 + ctnrPdg = 24,
36 - var h2Pdg = 40, 37 + scrollSize = 10,
37 - mastPdg = 8, 38 + portsTblPdg = 50,
38 - tbodyPdg = 5, 39 +
39 - cntrPdg = 24,
40 pName = 'device-details-panel', 40 pName = 'device-details-panel',
41 detailsReq = 'deviceDetailsRequest', 41 detailsReq = 'deviceDetailsRequest',
42 detailsResp = 'deviceDetailsResponse', 42 detailsResp = 'deviceDetailsResponse',
43 +
43 propOrder = [ 44 propOrder = [
44 'type', 'masterid', 'chassisid', 45 'type', 'masterid', 'chassisid',
45 'mfr', 'hw', 'sw', 'protocol', 'serial' 46 'mfr', 'hw', 'sw', 'protocol', 'serial'
...@@ -66,7 +67,7 @@ ...@@ -66,7 +67,7 @@
66 } 67 }
67 68
68 function setUpPanel() { 69 function setUpPanel() {
69 - var closeBtn; 70 + var container, closeBtn;
70 detailsPanel.empty(); 71 detailsPanel.empty();
71 72
72 container = detailsPanel.append('div').classed('container', true); 73 container = detailsPanel.append('div').classed('container', true);
...@@ -77,35 +78,13 @@ ...@@ -77,35 +78,13 @@
77 iconDiv = top.append('div').classed('dev-icon', true); 78 iconDiv = top.append('div').classed('dev-icon', true);
78 top.append('h2'); 79 top.append('h2');
79 top.append('table'); 80 top.append('table');
80 - 81 + top.append('hr');
81 - container.append('hr');
82 82
83 bottom = container.append('div').classed('bottom', true); 83 bottom = container.append('div').classed('bottom', true);
84 - bottom.append('h2').text('Ports'); 84 + bottom.append('h2').classed('ports-title', true).html('Ports');
85 bottom.append('table'); 85 bottom.append('table');
86 } 86 }
87 87
88 - function createDetailsPane() {
89 - var headerHeight = h2Pdg + fs.noPxStyle(d3.select('h2'), 'height'),
90 - panelTop = headerHeight + tbodyPdg + mast.mastHeight() + mastPdg,
91 - wSize = fs.windowSize(panelTop);
92 -
93 - detailsPanel = ps.createPanel(pName, {
94 - height: wSize.height,
95 - margin: 0,
96 - hideMargin: 0
97 - });
98 -
99 - detailsPanel.el().style({
100 - position: 'absolute',
101 - top: panelTop + 'px'
102 - });
103 -
104 - setUpPanel();
105 -
106 - detailsPanel.hide();
107 - }
108 -
109 function addProp(tbody, index, value) { 88 function addProp(tbody, index, value) {
110 var tr = tbody.append('tr'); 89 var tr = tbody.append('tr');
111 90
...@@ -118,7 +97,7 @@ ...@@ -118,7 +97,7 @@
118 97
119 function populateTop(tbody, details) { 98 function populateTop(tbody, details) {
120 is.loadEmbeddedIcon(iconDiv, details._iconid_type, 40); 99 is.loadEmbeddedIcon(iconDiv, details._iconid_type, 40);
121 - top.select('h2').text(details.id); 100 + top.select('h2').html(details.id);
122 101
123 propOrder.forEach(function (prop, i) { 102 propOrder.forEach(function (prop, i) {
124 addProp(tbody, i, details[prop]); 103 addProp(tbody, i, details[prop]);
...@@ -139,9 +118,7 @@ ...@@ -139,9 +118,7 @@
139 function populateBottom(table, ports) { 118 function populateBottom(table, ports) {
140 var theader = table.append('thead').append('tr'), 119 var theader = table.append('thead').append('tr'),
141 tbody = table.append('tbody'), 120 tbody = table.append('tbody'),
142 - tbWidth, tbHeight, 121 + tbWidth, tbHeight;
143 - scrollSize = 20,
144 - padding = 55;
145 122
146 friendlyPortCols.forEach(function (col) { 123 friendlyPortCols.forEach(function (col) {
147 theader.append('th').html(col); 124 theader.append('th').html(col);
...@@ -151,11 +128,12 @@ ...@@ -151,11 +128,12 @@
151 }); 128 });
152 129
153 tbWidth = fs.noPxStyle(tbody, 'width') + scrollSize; 130 tbWidth = fs.noPxStyle(tbody, 'width') + scrollSize;
154 - tbHeight = detailsPanel.height() 131 + tbHeight = pHeight
155 - - (fs.noPxStyle(detailsPanel.el().select('.top'), 'height') 132 + - (fs.noPxStyle(detailsPanel.el()
156 - + fs.noPxStyle(detailsPanel.el().select('hr'), 'height') 133 + .select('.top'), 'height')
157 - + fs.noPxStyle(detailsPanel.el().select('h2'), 'height') 134 + + fs.noPxStyle(detailsPanel.el()
158 - + padding); 135 + .select('.ports-title'), 'height')
136 + + portsTblPdg);
159 137
160 table.style({ 138 table.style({
161 height: tbHeight + 'px', 139 height: tbHeight + 'px',
...@@ -164,18 +142,21 @@ ...@@ -164,18 +142,21 @@
164 display: 'block' 142 display: 'block'
165 }); 143 });
166 144
167 - detailsPanel.width(tbWidth + cntrPdg); 145 + detailsPanel.width(tbWidth + ctnrPdg);
168 } 146 }
169 147
170 function populateDetails(details) { 148 function populateDetails(details) {
149 + var topTb, btmTbl, ports;
171 setUpPanel(); 150 setUpPanel();
172 151
173 - var topTb = top.select('table').append('tbody'), 152 + topTb = top.select('table').append('tbody');
174 - btmTbl = bottom.select('table'), 153 + btmTbl = bottom.select('table');
175 ports = details.ports; 154 ports = details.ports;
176 155
177 populateTop(topTb, details); 156 populateTop(topTb, details);
178 populateBottom(btmTbl, ports); 157 populateBottom(btmTbl, ports);
158 +
159 + detailsPanel.height(pHeight);
179 } 160 }
180 161
181 function respDetailsCb(data) { 162 function respDetailsCb(data) {
...@@ -184,6 +165,19 @@ ...@@ -184,6 +165,19 @@
184 detailsPanel.show(); 165 detailsPanel.show();
185 } 166 }
186 167
168 + function createDetailsPane() {
169 + detailsPanel = ps.createPanel(pName, {
170 + width: wSize.width,
171 + margin: 0,
172 + hideMargin: 0
173 + });
174 + detailsPanel.el().style({
175 + position: 'absolute',
176 + top: pStartY + 'px'
177 + });
178 + detailsPanel.hide();
179 + }
180 +
187 angular.module('ovDevice', []) 181 angular.module('ovDevice', [])
188 .controller('OvDeviceCtrl', 182 .controller('OvDeviceCtrl',
189 ['$log', '$scope', 'TableBuilderService', 'FnService', 183 ['$log', '$scope', 'TableBuilderService', 'FnService',
...@@ -200,10 +194,13 @@ ...@@ -200,10 +194,13 @@
200 self = this; 194 self = this;
201 var handlers = {}; 195 var handlers = {};
202 self.panelData = []; 196 self.panelData = [];
197 + pStartY = fs.noPxStyle(d3.select('.tabular-header'), 'height')
198 + + mast.mastHeight() + topPdg;
199 + wSize = fs.windowSize(pStartY);
200 + pHeight = wSize.height;
203 201
204 function selCb($event, row) { 202 function selCb($event, row) {
205 selRow = angular.element($event.currentTarget); 203 selRow = angular.element($event.currentTarget);
206 -
207 if ($scope.sel) { 204 if ($scope.sel) {
208 wss.sendEvent(detailsReq, { id: row.id }); 205 wss.sendEvent(detailsReq, { id: row.id });
209 } else { 206 } else {
...@@ -218,7 +215,6 @@ ...@@ -218,7 +215,6 @@
218 tag: 'device', 215 tag: 'device',
219 selCb: selCb 216 selCb: selCb
220 }); 217 });
221 -
222 createDetailsPane(); 218 createDetailsPane();
223 219
224 handlers[detailsResp] = respDetailsCb; 220 handlers[detailsResp] = respDetailsCb;
......
1 <!-- Host partial HTML --> 1 <!-- Host partial HTML -->
2 <div id="ov-host"> 2 <div id="ov-host">
3 + <div class="tabular-header">
3 <h2>Hosts ({{ctrl.tableData.length}} total)</h2> 4 <h2>Hosts ({{ctrl.tableData.length}} total)</h2>
5 + </div>
6 +
4 <table class="summary-list" 7 <table class="summary-list"
5 onos-fixed-header 8 onos-fixed-header
6 onos-sortable-header 9 onos-sortable-header
...@@ -36,5 +39,4 @@ ...@@ -36,5 +39,4 @@
36 </tr> 39 </tr>
37 </tbody> 40 </tbody>
38 </table> 41 </table>
39 -
40 </div> 42 </div>
......
...@@ -16,7 +16,9 @@ ...@@ -16,7 +16,9 @@
16 16
17 <!-- Intent partial HTML --> 17 <!-- Intent partial HTML -->
18 <div id="ov-intent"> 18 <div id="ov-intent">
19 + <div class="tabular-header">
19 <h2>Intents ({{ctrl.tableData.length}} total)</h2> 20 <h2>Intents ({{ctrl.tableData.length}} total)</h2>
21 + </div>
20 <table class="summary-list" 22 <table class="summary-list"
21 onos-fixed-header 23 onos-fixed-header
22 onos-sortable-header 24 onos-sortable-header
...@@ -51,5 +53,4 @@ ...@@ -51,5 +53,4 @@
51 </tr> 53 </tr>
52 </tbody> 54 </tbody>
53 </table> 55 </table>
54 -
55 </div> 56 </div>
......
...@@ -16,7 +16,10 @@ ...@@ -16,7 +16,10 @@
16 16
17 <!-- Link partial HTML --> 17 <!-- Link partial HTML -->
18 <div id="ov-link"> 18 <div id="ov-link">
19 + <div class="tabular-header">
19 <h2>Links ({{ctrl.tableData.length}} total)</h2> 20 <h2>Links ({{ctrl.tableData.length}} total)</h2>
21 + </div>
22 +
20 <table class="summary-list" 23 <table class="summary-list"
21 onos-fixed-header 24 onos-fixed-header
22 onos-sortable-header 25 onos-sortable-header
...@@ -52,5 +55,4 @@ ...@@ -52,5 +55,4 @@
52 </tr> 55 </tr>
53 </tbody> 56 </tbody>
54 </table> 57 </table>
55 -
56 </div> 58 </div>
......