홍길동 / 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 @@ ...@@ -79,14 +79,5 @@
79 }); 79 });
80 } 80 }
81 }; 81 };
82 - }])
83 -
84 - // create a general ng-repeat complete notifier directive
85 - .directive('ngRepeatDone', [function () {
86 - return function (scope) {
87 - if (scope.$last) {
88 - scope.$emit('LastElement');
89 - }
90 - };
91 }]); 82 }]);
92 }()); 83 }());
......
...@@ -35,30 +35,17 @@ ...@@ -35,30 +35,17 @@
35 // internal state 35 // internal state
36 var currCol = {}, 36 var currCol = {},
37 prevCol = {}, 37 prevCol = {},
38 + cstmWidths = {},
38 sortIconAPI; 39 sortIconAPI;
39 40
40 - // Functions for creating a scrolling table body with fixed table header 41 + // Functions for resizing a tabular view to the window
41 42
42 function _width(elem, width) { 43 function _width(elem, width) {
43 elem.style('width', width); 44 elem.style('width', width);
44 } 45 }
45 46
46 - function defaultSize(table, width) { 47 + function findCstmWidths(table) {
47 - var thead = table.select('.table-header').select('table'), 48 + var headers = table.select('.table-header').selectAll('td');
48 - tbody = table.select('.table-body').select('table'),
49 - wpx = width + 'px';
50 - _width(thead, wpx);
51 - _width(tbody, wpx);
52 - }
53 -
54 - function adjustTable(table, width, height) {
55 - var thead = table.select('.table-header').select('table'),
56 - tbodyDiv = table.select('.table-body'),
57 - tbody = tbodyDiv.select('table'),
58 - cstmWidths = {};
59 -
60 - function findCstmWidths() {
61 - var headers = thead.selectAll('td');
62 49
63 headers.each(function (d, i) { 50 headers.each(function (d, i) {
64 var h = d3.select(this), 51 var h = d3.select(this),
...@@ -75,8 +62,8 @@ ...@@ -75,8 +62,8 @@
75 } 62 }
76 } 63 }
77 64
78 - function setTdWidths(elem) { 65 + function setTdWidths(elem, width) {
79 - var tds = elem.selectAll('tr:not(.ignore-width)').selectAll('td'); 66 + var tds = elem.select('tr:first-child').selectAll('td');
80 _width(elem, width + 'px'); 67 _width(elem, width + 'px');
81 68
82 tds.each(function (d, i) { 69 tds.each(function (d, i) {
...@@ -88,19 +75,22 @@ ...@@ -88,19 +75,22 @@
88 }); 75 });
89 } 76 }
90 77
91 - function setHeight(body) { 78 + function setHeight(thead, body, height) {
92 var h = height - (mast.mastHeight() + 79 var h = height - (mast.mastHeight() +
93 fs.noPxStyle(d3.select('.tabular-header'), 'height') + 80 fs.noPxStyle(d3.select('.tabular-header'), 'height') +
94 fs.noPxStyle(thead, 'height') + pdg); 81 fs.noPxStyle(thead, 'height') + pdg);
95 body.style('height', h + 'px'); 82 body.style('height', h + 'px');
96 } 83 }
97 84
98 - findCstmWidths(); 85 + function adjustTable(haveItems, tableElems, width, height) {
99 - setTdWidths(thead); 86 + if (haveItems) {
100 - setTdWidths(tbody); 87 + setTdWidths(tableElems.thead, width);
101 - setHeight(tbodyDiv); 88 + setTdWidths(tableElems.tbody, width);
102 - 89 + setHeight(tableElems.thead, tableElems.table.select('.table-body'), height);
103 - cstmWidths = {}; 90 + } else {
91 + setTdWidths(tableElems.thead, width);
92 + _width(tableElems.tbody, width + 'px');
93 + }
104 } 94 }
105 95
106 // Functions for sorting table rows by header 96 // Functions for sorting table rows by header
...@@ -147,7 +137,7 @@ ...@@ -147,7 +137,7 @@
147 } 137 }
148 138
149 angular.module('onosWidget') 139 angular.module('onosWidget')
150 - .directive('onosFixedHeader', ['$log','$window', 140 + .directive('onosTableResize', ['$log','$window',
151 'FnService', 'MastService', 141 'FnService', 'MastService',
152 142
153 function (_$log_, _$window_, _fs_, _mast_) { 143 function (_$log_, _$window_, _fs_, _mast_) {
...@@ -158,31 +148,41 @@ ...@@ -158,31 +148,41 @@
158 mast = _mast_; 148 mast = _mast_;
159 149
160 var table = d3.select(element[0]), 150 var table = d3.select(element[0]),
161 - canAdjust = false; 151 + tableElems = {
152 + table: table,
153 + thead: table.select('.table-header').select('table'),
154 + tbody: table.select('.table-body').select('table')
155 + },
156 + wsz;
157 +
158 + findCstmWidths(table);
162 159
160 + // adjust table on window resize
163 scope.$watchCollection(function () { 161 scope.$watchCollection(function () {
164 return { 162 return {
165 h: $window.innerHeight, 163 h: $window.innerHeight,
166 w: $window.innerWidth 164 w: $window.innerWidth
167 }; 165 };
168 }, function () { 166 }, function () {
169 - var wsz = fs.windowSize(0, 30), 167 + wsz = fs.windowSize(0, 30);
170 - wWidth = wsz.width, 168 + adjustTable(
171 - wHeight = wsz.height; 169 + scope.tableData.length,
172 - 170 + tableElems,
173 - if (!scope.tableData.length) { 171 + wsz.width, wsz.height
174 - defaultSize(table, wWidth); 172 + );
175 - } 173 + });
176 174
177 - scope.$on('LastElement', function () { 175 + // adjust table when data changes
178 - // only adjust the table once it's completely loaded 176 + scope.$watchCollection('tableData', function () {
179 - adjustTable(table, wWidth, wHeight); 177 + adjustTable(
180 - canAdjust = true; 178 + scope.tableData.length,
179 + tableElems,
180 + wsz.width, wsz.height
181 + );
181 }); 182 });
182 183
183 - if (canAdjust) { 184 + scope.$on('$destroy', function () {
184 - adjustTable(table, wWidth, wHeight); 185 + cstmWidths = {};
185 - }
186 }); 186 });
187 }; 187 };
188 }]) 188 }])
......
...@@ -31,7 +31,7 @@ ...@@ -31,7 +31,7 @@
31 </div> 31 </div>
32 </div> 32 </div>
33 33
34 - <div class="summary-list" onos-fixed-header> 34 + <div class="summary-list" onos-table-resize>
35 35
36 <div class="table-header" 36 <div class="table-header"
37 onos-sortable-header 37 onos-sortable-header
...@@ -50,16 +50,15 @@ ...@@ -50,16 +50,15 @@
50 50
51 <div class="table-body"> 51 <div class="table-body">
52 <table> 52 <table>
53 - <tr ng-hide="tableData.length" class="no-data ignore-width"> 53 + <tr ng-if="!tableData.length" class="no-data">
54 <td colspan="5"> 54 <td colspan="5">
55 No Applications found 55 No Applications found
56 </td> 56 </td>
57 </tr> 57 </tr>
58 58
59 - <tr ng-repeat="app in tableData" 59 + <tr ng-repeat="app in tableData track by $index"
60 ng-click="selectCallback($event, app)" 60 ng-click="selectCallback($event, app)"
61 - ng-class="{selected: app.id === selId}" 61 + ng-class="{selected: app.id === selId}">
62 - ng-repeat-done>
63 <td class="table-icon"> 62 <td class="table-icon">
64 <div icon icon-id="{{app._iconid_state}}"></div> 63 <div icon icon-id="{{app._iconid_state}}"></div>
65 </td> 64 </td>
......
...@@ -63,7 +63,6 @@ ...@@ -63,7 +63,6 @@
63 selCb: selCb, 63 selCb: selCb,
64 respCb: refreshCtrls 64 respCb: refreshCtrls
65 }); 65 });
66 - $scope.toggleRefresh();
67 66
68 $scope.appAction = function (action) { 67 $scope.appAction = function (action) {
69 if ($scope.ctrlBtnState.selection) { 68 if ($scope.ctrlBtnState.selection) {
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
25 </div> 25 </div>
26 </div> 26 </div>
27 27
28 - <div class="summary-list" onos-fixed-header> 28 + <div class="summary-list" onos-table-resize>
29 29
30 <div class="table-header" 30 <div class="table-header"
31 onos-sortable-header 31 onos-sortable-header
...@@ -44,14 +44,13 @@ ...@@ -44,14 +44,13 @@
44 44
45 <div class="table-body"> 45 <div class="table-body">
46 <table> 46 <table>
47 - <tr ng-hide="tableData.length" class="no-data ignore-width"> 47 + <tr ng-if="!tableData.length" class="no-data">
48 <td colspan="5"> 48 <td colspan="5">
49 No Cluster Nodes found 49 No Cluster Nodes found
50 </td> 50 </td>
51 </tr> 51 </tr>
52 52
53 - <tr ng-repeat="node in tableData" 53 + <tr ng-repeat="node in tableData track by $index">
54 - ng-repeat-done>
55 <td class="table-icon"> 54 <td class="table-icon">
56 <div icon icon-id="{{node._iconid_state}}"></div> 55 <div icon icon-id="{{node._iconid_state}}"></div>
57 </td> 56 </td>
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 </div> 9 </div>
10 </div> 10 </div>
11 11
12 - <div class="summary-list" onos-fixed-header> 12 + <div class="summary-list" onos-table-resize>
13 13
14 <div class="table-header" 14 <div class="table-header"
15 onos-sortable-header 15 onos-sortable-header
...@@ -32,16 +32,15 @@ ...@@ -32,16 +32,15 @@
32 32
33 <div class="table-body"> 33 <div class="table-body">
34 <table> 34 <table>
35 - <tr ng-hide="tableData.length" class="no-data ignore-width"> 35 + <tr ng-if="!tableData.length" class="no-data">
36 <td colspan="9"> 36 <td colspan="9">
37 No Devices found 37 No Devices found
38 </td> 38 </td>
39 </tr> 39 </tr>
40 40
41 - <tr ng-repeat="dev in tableData track by dev.id" 41 + <tr ng-repeat="dev in tableData track by $index"
42 ng-click="selectCallback($event, dev)" 42 ng-click="selectCallback($event, dev)"
43 - ng-class="{selected: dev.id === selId}" 43 + ng-class="{selected: dev.id === selId}">
44 - ng-repeat-done>
45 <td class="table-icon"> 44 <td class="table-icon">
46 <div icon icon-id="{{dev._iconid_available}}"></div> 45 <div icon icon-id="{{dev._iconid_available}}"></div>
47 </td> 46 </td>
......
...@@ -26,24 +26,24 @@ ...@@ -26,24 +26,24 @@
26 width: 45px; 26 width: 45px;
27 } 27 }
28 28
29 +.light #ov-flow tr:nth-child(6n + 1),
29 .light #ov-flow tr:nth-child(6n + 2), 30 .light #ov-flow tr:nth-child(6n + 2),
30 -.light #ov-flow tr:nth-child(6n + 3), 31 +.light #ov-flow tr:nth-child(6n + 3) {
31 -.light #ov-flow tr:nth-child(6n + 4) {
32 background-color: #eee; 32 background-color: #eee;
33 } 33 }
34 +.light #ov-flow tr:nth-child(6n + 4),
34 .light #ov-flow tr:nth-child(6n + 5), 35 .light #ov-flow tr:nth-child(6n + 5),
35 -.light #ov-flow tr:nth-child(6n + 6), 36 +.light #ov-flow tr:nth-child(6n) {
36 -.light #ov-flow tr:nth-child(6n + 1) {
37 background-color: #ddd; 37 background-color: #ddd;
38 } 38 }
39 +.dark #ov-flow tr:nth-child(6n + 1),
39 .dark #ov-flow tr:nth-child(6n + 2), 40 .dark #ov-flow tr:nth-child(6n + 2),
40 -.dark #ov-flow tr:nth-child(6n + 3), 41 +.dark #ov-flow tr:nth-child(6n + 3) {
41 -.dark #ov-flow tr:nth-child(6n + 4) {
42 background-color: #444; 42 background-color: #444;
43 } 43 }
44 +.dark #ov-flow tr:nth-child(6n + 4),
44 .dark #ov-flow tr:nth-child(6n + 5), 45 .dark #ov-flow tr:nth-child(6n + 5),
45 -.dark #ov-flow tr:nth-child(6n + 6), 46 +.dark #ov-flow tr:nth-child(6n) {
46 -.dark #ov-flow tr:nth-child(6n + 1) {
47 background-color: #333; 47 background-color: #333;
48 } 48 }
49 49
......
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
12 </div> 12 </div>
13 </div> 13 </div>
14 14
15 - <div class="summary-list" onos-fixed-header> 15 + <div class="summary-list" onos-table-resize>
16 16
17 <div class="table-header" 17 <div class="table-header"
18 onos-sortable-header 18 onos-sortable-header
...@@ -36,13 +36,13 @@ ...@@ -36,13 +36,13 @@
36 36
37 <div class="table-body"> 37 <div class="table-body">
38 <table> 38 <table>
39 - <tr ng-hide="tableData.length" class="no-data ignore-width"> 39 + <tr ng-if="!tableData.length" class="no-data">
40 <td colspan="10"> 40 <td colspan="10">
41 No Flows found 41 No Flows found
42 </td> 42 </td>
43 </tr> 43 </tr>
44 44
45 - <tr ng-repeat-start="flow in tableData"> 45 + <tr ng-repeat-start="flow in tableData track by $index">
46 <td>{{flow.id}}</td> 46 <td>{{flow.id}}</td>
47 <td>{{flow.appId}}</td> 47 <td>{{flow.appId}}</td>
48 <td>{{flow.groupId}}</td> 48 <td>{{flow.groupId}}</td>
...@@ -54,11 +54,10 @@ ...@@ -54,11 +54,10 @@
54 <td>{{flow.packets}}</td> 54 <td>{{flow.packets}}</td>
55 <td>{{flow.bytes}}</td> 55 <td>{{flow.bytes}}</td>
56 </tr> 56 </tr>
57 - <tr class="ignore-width"> 57 + <tr>
58 <td class="selector" colspan="10">{{flow.selector}}</td> 58 <td class="selector" colspan="10">{{flow.selector}}</td>
59 </tr> 59 </tr>
60 - <tr class="ignore-width" 60 + <tr ng-repeat-end>
61 - ng-repeat-end ng-repeat-done>
62 <td class="treatment" colspan="10">{{flow.treatment}}</td> 61 <td class="treatment" colspan="10">{{flow.treatment}}</td>
63 </tr> 62 </tr>
64 </table> 63 </table>
......
...@@ -26,20 +26,20 @@ ...@@ -26,20 +26,20 @@
26 width: 45px; 26 width: 45px;
27 } 27 }
28 28
29 -.light #ov-group tr:nth-child(4n + 2), 29 +.light #ov-group tr:nth-child(4n + 1),
30 -.light #ov-group tr:nth-child(4n + 3) { 30 +.light #ov-group tr:nth-child(4n + 2) {
31 background-color: #eee; 31 background-color: #eee;
32 } 32 }
33 -.light #ov-group tr:nth-child(4n + 4), 33 +.light #ov-group tr:nth-child(4n + 3),
34 -.light #ov-group tr:nth-child(4n + 1) { 34 +.light #ov-group tr:nth-child(4n) {
35 background-color: #ddd; 35 background-color: #ddd;
36 } 36 }
37 -.dark #ov-group tr:nth-child(4n + 2), 37 +.dark #ov-group tr:nth-child(4n + 1),
38 -.dark #ov-group tr:nth-child(4n + 3) { 38 +.dark #ov-group tr:nth-child(4n + 2) {
39 background-color: #444; 39 background-color: #444;
40 } 40 }
41 -.dark #ov-group tr:nth-child(4n + 4), 41 +.dark #ov-group tr:nth-child(4n + 3),
42 -.dark #ov-group tr:nth-child(4n + 1) { 42 +.dark #ov-group tr:nth-child(4n) {
43 background-color: #333; 43 background-color: #333;
44 } 44 }
45 45
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
28 </div> 28 </div>
29 </div> 29 </div>
30 30
31 - <div class="summary-list" onos-fixed-header> 31 + <div class="summary-list" onos-table-resize>
32 32
33 <div class="table-header" 33 <div class="table-header"
34 onos-sortable-header 34 onos-sortable-header
...@@ -48,13 +48,13 @@ ...@@ -48,13 +48,13 @@
48 48
49 <div class="table-body"> 49 <div class="table-body">
50 <table> 50 <table>
51 - <tr ng-hide="tableData.length" class="no-data ignore-width"> 51 + <tr ng-if="!tableData.length" class="no-data">
52 <td colspan="6"> 52 <td colspan="6">
53 No Groups found 53 No Groups found
54 </td> 54 </td>
55 </tr> 55 </tr>
56 56
57 - <tr ng-repeat-start="group in tableData"> 57 + <tr ng-repeat-start="group in tableData track by $index">
58 <td>{{group.id}}</td> 58 <td>{{group.id}}</td>
59 <td>{{group.app_id}}</td> 59 <td>{{group.app_id}}</td>
60 <td>{{group.state}}</td> 60 <td>{{group.state}}</td>
...@@ -62,8 +62,7 @@ ...@@ -62,8 +62,7 @@
62 <td>{{group.packets}}</td> 62 <td>{{group.packets}}</td>
63 <td>{{group.bytes}}</td> 63 <td>{{group.bytes}}</td>
64 </tr> 64 </tr>
65 - <tr class="ignore-width" 65 + <tr ng-repeat-end>
66 - ng-repeat-end ng-repeat-done>
67 <td class="buckets" colspan="6" 66 <td class="buckets" colspan="6"
68 ng-bind-html="group.buckets"></td> 67 ng-bind-html="group.buckets"></td>
69 </tr> 68 </tr>
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 </div> 9 </div>
10 </div> 10 </div>
11 11
12 - <div class="summary-list" onos-fixed-header> 12 + <div class="summary-list" onos-table-resize>
13 13
14 <div class="table-header" 14 <div class="table-header"
15 onos-sortable-header 15 onos-sortable-header
...@@ -29,14 +29,13 @@ ...@@ -29,14 +29,13 @@
29 29
30 <div class="table-body"> 30 <div class="table-body">
31 <table> 31 <table>
32 - <tr ng-hide="tableData.length" class="no-data ignore-width"> 32 + <tr ng-if="!tableData.length" class="no-data">
33 <td colspan="6"> 33 <td colspan="6">
34 No Hosts found 34 No Hosts found
35 </td> 35 </td>
36 </tr> 36 </tr>
37 37
38 - <tr ng-repeat="host in tableData" 38 + <tr ng-repeat="host in tableData track by $index">
39 - ng-repeat-done>
40 <td class="table-icon"> 39 <td class="table-icon">
41 <div icon icon-id="{{host._iconid_type}}"></div> 40 <div icon icon-id="{{host._iconid_type}}"></div>
42 </td> 41 </td>
......
...@@ -26,24 +26,24 @@ ...@@ -26,24 +26,24 @@
26 width: 45px; 26 width: 45px;
27 } 27 }
28 28
29 +.light #ov-intent tr:nth-child(6n + 1),
29 .light #ov-intent tr:nth-child(6n + 2), 30 .light #ov-intent tr:nth-child(6n + 2),
30 -.light #ov-intent tr:nth-child(6n + 3), 31 +.light #ov-intent tr:nth-child(6n + 3) {
31 -.light #ov-intent tr:nth-child(6n + 4) {
32 background-color: #eee; 32 background-color: #eee;
33 } 33 }
34 +.light #ov-intent tr:nth-child(6n + 4),
34 .light #ov-intent tr:nth-child(6n + 5), 35 .light #ov-intent tr:nth-child(6n + 5),
35 -.light #ov-intent tr:nth-child(6n + 6), 36 +.light #ov-intent tr:nth-child(6n) {
36 -.light #ov-intent tr:nth-child(6n + 1) {
37 background-color: #ddd; 37 background-color: #ddd;
38 } 38 }
39 +.dark #ov-intent tr:nth-child(6n + 1),
39 .dark #ov-intent tr:nth-child(6n + 2), 40 .dark #ov-intent tr:nth-child(6n + 2),
40 -.dark #ov-intent tr:nth-child(6n + 3), 41 +.dark #ov-intent tr:nth-child(6n + 3) {
41 -.dark #ov-intent tr:nth-child(6n + 4) {
42 background-color: #444; 42 background-color: #444;
43 } 43 }
44 +.dark #ov-intent tr:nth-child(6n + 4),
44 .dark #ov-intent tr:nth-child(6n + 5), 45 .dark #ov-intent tr:nth-child(6n + 5),
45 -.dark #ov-intent tr:nth-child(6n + 6), 46 +.dark #ov-intent tr:nth-child(6n) {
46 -.dark #ov-intent tr:nth-child(6n + 1) {
47 background-color: #333; 47 background-color: #333;
48 } 48 }
49 49
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
25 </div> 25 </div>
26 </div> 26 </div>
27 27
28 - <div class="summary-list" onos-fixed-header> 28 + <div class="summary-list" onos-table-resize>
29 29
30 <div class="table-header" 30 <div class="table-header"
31 onos-sortable-header 31 onos-sortable-header
...@@ -44,13 +44,13 @@ ...@@ -44,13 +44,13 @@
44 44
45 <div class="table-body"> 45 <div class="table-body">
46 <table> 46 <table>
47 - <tr ng-hide="tableData.length" class="no-data ignore-width"> 47 + <tr ng-if="!tableData.length" class="no-data">
48 <td colspan="5"> 48 <td colspan="5">
49 No Intents found 49 No Intents found
50 </td> 50 </td>
51 </tr> 51 </tr>
52 52
53 - <tr ng-repeat-start="intent in tableData"> 53 + <tr ng-repeat-start="intent in tableData track by $index">
54 <td>{{intent.appId}}</td> 54 <td>{{intent.appId}}</td>
55 <td>{{intent.key}}</td> 55 <td>{{intent.key}}</td>
56 <td>{{intent.type}}</td> 56 <td>{{intent.type}}</td>
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
60 <tr> 60 <tr>
61 <td class="resources" colspan="5">{{intent.resources}}</td> 61 <td class="resources" colspan="5">{{intent.resources}}</td>
62 </tr> 62 </tr>
63 - <tr ng-repeat-end ng-repeat-done> 63 + <tr ng-repeat-end>
64 <td class="details" colspan="5">{{intent.details}}</td> 64 <td class="details" colspan="5">{{intent.details}}</td>
65 </tr> 65 </tr>
66 </table> 66 </table>
......
...@@ -25,7 +25,7 @@ ...@@ -25,7 +25,7 @@
25 </div> 25 </div>
26 </div> 26 </div>
27 27
28 - <div class="summary-list" onos-fixed-header> 28 + <div class="summary-list" onos-table-resize>
29 29
30 <div class="table-header" 30 <div class="table-header"
31 onos-sortable-header 31 onos-sortable-header
...@@ -45,14 +45,13 @@ ...@@ -45,14 +45,13 @@
45 45
46 <div class="table-body"> 46 <div class="table-body">
47 <table> 47 <table>
48 - <tr ng-hide="tableData.length" class="no-data ignore-width"> 48 + <tr ng-if="!tableData.length" class="no-data">
49 <td colspan="6"> 49 <td colspan="6">
50 No Links found 50 No Links found
51 </td> 51 </td>
52 </tr> 52 </tr>
53 53
54 - <tr ng-repeat="link in tableData" 54 + <tr ng-repeat="link in tableData track by $index">
55 - ng-repeat-done>
56 <td class="table-icon"> 55 <td class="table-icon">
57 <div icon icon-id="{{link._iconid_state}}"></div> 56 <div icon icon-id="{{link._iconid_state}}"></div>
58 </td> 57 </td>
......
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
28 </div> 28 </div>
29 </div> 29 </div>
30 30
31 - <div class="summary-list" onos-fixed-header> 31 + <div class="summary-list" onos-table-resize>
32 32
33 <div class="table-header" 33 <div class="table-header"
34 onos-sortable-header 34 onos-sortable-header
...@@ -50,14 +50,13 @@ ...@@ -50,14 +50,13 @@
50 50
51 <div class="table-body"> 51 <div class="table-body">
52 <table> 52 <table>
53 - <tr ng-hide="tableData.length" class="no-data ignore-width"> 53 + <tr ng-if="!tableData.length" class="no-data">
54 <td colspan="8"> 54 <td colspan="8">
55 No Ports found 55 No Ports found
56 </td> 56 </td>
57 </tr> 57 </tr>
58 58
59 - <tr ng-repeat="port in tableData" 59 + <tr ng-repeat="port in tableData track by $index">
60 - ng-repeat-done>
61 <td>{{port.id}}</td> 60 <td>{{port.id}}</td>
62 <td>{{port.pkt_rx}}</td> 61 <td>{{port.pkt_rx}}</td>
63 <td>{{port.pkt_tx}}</td> 62 <td>{{port.pkt_tx}}</td>
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 </div> 9 </div>
10 </div> 10 </div>
11 11
12 - <div class="summary-list" onos-fixed-header> 12 + <div class="summary-list" onos-table-resize>
13 13
14 <div class="table-header" 14 <div class="table-header"
15 onos-sortable-header 15 onos-sortable-header
...@@ -17,26 +17,25 @@ ...@@ -17,26 +17,25 @@
17 sort-callback="sortCallback(sortParams)"> 17 sort-callback="sortCallback(sortParams)">
18 <table> 18 <table>
19 <tr> 19 <tr>
20 - <td colId="component" sortable col-width="350px">Component </td> 20 + <td colId="component" sortable col-width="200px">Component </td>
21 <td colId="id" sortable>Property </td> 21 <td colId="id" sortable>Property </td>
22 <td colId="type" sortable col-width="70px">Type </td> 22 <td colId="type" sortable col-width="70px">Type </td>
23 <td colId="value" sortable>Value </td> 23 <td colId="value" sortable>Value </td>
24 <td colId="defValue" sortable>Default </td> 24 <td colId="defValue" sortable>Default </td>
25 - <td colId="desc" col-width="520px">Description </td> 25 + <td colId="desc" col-width="400px">Description </td>
26 </tr> 26 </tr>
27 </table> 27 </table>
28 </div> 28 </div>
29 29
30 <div class="table-body"> 30 <div class="table-body">
31 <table> 31 <table>
32 - <tr ng-hide="tableData.length" class="no-data ignore-width"> 32 + <tr ng-if="!tableData.length" class="no-data">
33 <td colspan="6"> 33 <td colspan="6">
34 No Settings found 34 No Settings found
35 </td> 35 </td>
36 </tr> 36 </tr>
37 37
38 - <tr ng-repeat="prop in tableData" 38 + <tr ng-repeat="prop in tableData track by $index">
39 - ng-repeat-done>
40 <td>{{prop.component}}</td> 39 <td>{{prop.component}}</td>
41 <td>{{prop.id}}</td> 40 <td>{{prop.id}}</td>
42 <td>{{prop.type}}</td> 41 <td>{{prop.type}}</td>
......
...@@ -135,7 +135,7 @@ html[data-platform='iPad'] #topo-p-detail { ...@@ -135,7 +135,7 @@ html[data-platform='iPad'] #topo-p-detail {
135 .topo-p h2 { 135 .topo-p h2 {
136 padding: 0 4px; 136 padding: 0 4px;
137 margin: 0; 137 margin: 0;
138 - word-break: break-all; 138 + word-wrap: break-word;
139 display: inline-block; 139 display: inline-block;
140 width: 210px; 140 width: 210px;
141 vertical-align: middle; 141 vertical-align: middle;
...@@ -150,7 +150,7 @@ html[data-platform='iPad'] #topo-p-detail { ...@@ -150,7 +150,7 @@ html[data-platform='iPad'] #topo-p-detail {
150 .topo-p h3 { 150 .topo-p h3 {
151 padding: 0 4px; 151 padding: 0 4px;
152 margin: 0; 152 margin: 0;
153 - word-break: break-all; 153 + word-wrap: break-word;
154 top: 20px; 154 top: 20px;
155 left: 50px; 155 left: 50px;
156 } 156 }
...@@ -167,7 +167,7 @@ html[data-platform='iPad'] #topo-p-detail { ...@@ -167,7 +167,7 @@ html[data-platform='iPad'] #topo-p-detail {
167 } 167 }
168 168
169 .topo-p td { 169 .topo-p td {
170 - word-break: break-all; 170 + word-wrap: break-word;
171 } 171 }
172 .topo-p td.label { 172 .topo-p td.label {
173 font-style: italic; 173 font-style: italic;
......