홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
0c41ba26 1 parent 6d7968e5

GUI -- Cleaned up directives - onos-sortable-header and icon no longer use isola… 

…te scope. Icon directive moved to icon.js. Deleted unneeded TableService.

Change-Id: I53970176b9ca021d1aa7d844ccd961cbf6ac6b51
Inline Side-by-side
Showing 14 changed files with 32 additions and 89 deletions
...@@ -59,25 +59,5 @@ ...@@ -59,25 +59,5 @@
59 }); 59 });
60 } 60 }
61 }; 61 };
62 - }])
63 -
64 -
65 - // create icon directive, so that we can inject icons into
66 - // HTML tables etc.
67 - .directive('icon', ['IconService', function (is) {
68 - return {
69 - restrict: 'A',
70 - scope: {
71 - iconId: '@',
72 - iconSize: '@'
73 - },
74 - link: function (scope, element, attrs) {
75 - attrs.$observe('iconId', function () {
76 - var div = d3.select(element[0]);
77 - div.selectAll('*').remove();
78 - is.loadEmbeddedIcon(div, scope.iconId, scope.iconSize);
79 - });
80 - }
81 - };
82 }]); 62 }]);
83 }()); 63 }());
......
...@@ -227,6 +227,19 @@ ...@@ -227,6 +227,19 @@
227 // === DEFINE THE MODULE 227 // === DEFINE THE MODULE
228 228
229 angular.module('onosSvg') 229 angular.module('onosSvg')
230 + .directive('icon', ['IconService', function (is) {
231 + return {
232 + restrict: 'A',
233 + link: function (scope, element, attrs) {
234 + attrs.$observe('iconId', function () {
235 + var div = d3.select(element[0]);
236 + div.selectAll('*').remove();
237 + is.loadEmbeddedIcon(div, attrs.iconId, attrs.iconSize);
238 + });
239 + }
240 + };
241 + }])
242 +
230 .factory('IconService', ['$log', 'FnService', 'GlyphService', 243 .factory('IconService', ['$log', 'FnService', 'GlyphService',
231 'SvgUtilService', 244 'SvgUtilService',
232 245
......
...@@ -189,44 +189,26 @@ ...@@ -189,44 +189,26 @@
189 189
190 .directive('onosSortableHeader', ['$log', 'IconService', 190 .directive('onosSortableHeader', ['$log', 'IconService',
191 function (_$log_, _is_) { 191 function (_$log_, _is_) {
192 - return { 192 + return function (scope, element) {
193 - scope: {
194 - sortCallback: '&',
195 - sortParams: '='
196 - },
197 - link: function (scope, element) {
198 $log = _$log_; 193 $log = _$log_;
199 is = _is_; 194 is = _is_;
200 var header = d3.select(element[0]); 195 var header = d3.select(element[0]);
201 sortIconAPI = is.sortIcons(); 196 sortIconAPI = is.sortIcons();
202 197
203 - // when a header is clicked, change its sort direction
204 - // and get sorting order to send to the server.
205 header.selectAll('td').on('click', function () { 198 header.selectAll('td').on('click', function () {
206 var col = d3.select(this); 199 var col = d3.select(this);
207 200
208 if (col.attr('sortable') === '') { 201 if (col.attr('sortable') === '') {
209 updateSortDirection(col); 202 updateSortDirection(col);
210 - scope.$apply(function () {
211 scope.sortParams = sortRequestParams(); 203 scope.sortParams = sortRequestParams();
212 - }); 204 + scope.sortCallback(scope.sortParams);
213 - scope.sortCallback({
214 - requestParams: scope.sortParams
215 - });
216 } 205 }
217 }); 206 });
218 - }
219 - };
220 - }])
221 207
222 - .factory('TableService', ['IconService', 208 + scope.$on('$destroy', function () {
223 - 209 + resetSort();
224 - function (is) { 210 + });
225 - sortIconAPI = is.sortIcons(); 211 + }
226 -
227 - return {
228 - resetSort: resetSort
229 - };
230 }]); 212 }]);
231 213
232 }()); 214 }());
......
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
21 'use strict'; 21 'use strict';
22 22
23 // injected refs 23 // injected refs
24 - var $log, $interval, fs, wss, ts; 24 + var $log, $interval, fs, wss;
25 25
26 // constants 26 // constants
27 var refreshInterval = 2000; 27 var refreshInterval = 2000;
...@@ -98,7 +98,6 @@ ...@@ -98,7 +98,6 @@
98 // Cleanup on destroyed scope 98 // Cleanup on destroyed scope
99 o.scope.$on('$destroy', function () { 99 o.scope.$on('$destroy', function () {
100 wss.unbindHandlers(handlers); 100 wss.unbindHandlers(handlers);
101 - ts.resetSort();
102 stopRefresh(); 101 stopRefresh();
103 }); 102 });
104 103
...@@ -108,14 +107,13 @@ ...@@ -108,14 +107,13 @@
108 107
109 angular.module('onosWidget') 108 angular.module('onosWidget')
110 .factory('TableBuilderService', 109 .factory('TableBuilderService',
111 - ['$log', '$interval', 'FnService', 'WebSocketService', 'TableService', 110 + ['$log', '$interval', 'FnService', 'WebSocketService',
112 111
113 - function (_$log_, _$interval_, _fs_, _wss_, _ts_) { 112 + function (_$log_, _$interval_, _fs_, _wss_) {
114 $log = _$log_; 113 $log = _$log_;
115 $interval = _$interval_; 114 $interval = _$interval_;
116 fs = _fs_; 115 fs = _fs_;
117 wss = _wss_; 116 wss = _wss_;
118 - ts = _ts_;
119 117
120 return { 118 return {
121 buildTable: buildTable 119 buildTable: buildTable
......
...@@ -38,10 +38,7 @@ ...@@ -38,10 +38,7 @@
38 38
39 <div class="summary-list" onos-table-resize> 39 <div class="summary-list" onos-table-resize>
40 40
41 - <div class="table-header" 41 + <div class="table-header" onos-sortable-header>
42 - onos-sortable-header
43 - sort-params="sortParams"
44 - sort-callback="sortCallback(sortParams)">
45 <table> 42 <table>
46 <tr> 43 <tr>
47 <td colId="state" class="table-icon" sortable></td> 44 <td colId="state" class="table-icon" sortable></td>
......
...@@ -28,10 +28,7 @@ ...@@ -28,10 +28,7 @@
28 28
29 <div class="summary-list" onos-table-resize> 29 <div class="summary-list" onos-table-resize>
30 30
31 - <div class="table-header" 31 + <div class="table-header" onos-sortable-header>
32 - onos-sortable-header
33 - sort-params="sortParams"
34 - sort-callback="sortCallback(sortParams)">
35 <table> 32 <table>
36 <tr> 33 <tr>
37 <td colId="_iconid_state" class="table-icon" sortable></td> 34 <td colId="_iconid_state" class="table-icon" sortable></td>
......
...@@ -28,10 +28,7 @@ ...@@ -28,10 +28,7 @@
28 28
29 <div class="summary-list" onos-table-resize> 29 <div class="summary-list" onos-table-resize>
30 30
31 - <div class="table-header" 31 + <div class="table-header" onos-sortable-header>
32 - onos-sortable-header
33 - sort-params="sortParams"
34 - sort-callback="sortCallback(sortParams)">
35 <table> 32 <table>
36 <tr> 33 <tr>
37 <td colId="available" class="table-icon" sortable></td> 34 <td colId="available" class="table-icon" sortable></td>
......
...@@ -30,10 +30,7 @@ ...@@ -30,10 +30,7 @@
30 30
31 <div class="summary-list" onos-table-resize> 31 <div class="summary-list" onos-table-resize>
32 32
33 - <div class="table-header" 33 + <div class="table-header" onos-sortable-header>
34 - onos-sortable-header
35 - sort-params="sortParams"
36 - sort-callback="sortCallback(sortParams)">
37 <table> 34 <table>
38 <tr> 35 <tr>
39 <td colId="id" col-width="180px" sortable>Flow ID </td> 36 <td colId="id" col-width="180px" sortable>Flow ID </td>
......
...@@ -46,10 +46,7 @@ ...@@ -46,10 +46,7 @@
46 46
47 <div class="summary-list" onos-table-resize> 47 <div class="summary-list" onos-table-resize>
48 48
49 - <div class="table-header" 49 + <div class="table-header" onos-sortable-header>
50 - onos-sortable-header
51 - sort-params="sortParams"
52 - sort-callback="sortCallback(sortParams)">
53 <table> 50 <table>
54 <tr> 51 <tr>
55 <td colId="id" sortable>Group ID </td> 52 <td colId="id" sortable>Group ID </td>
......
...@@ -12,10 +12,7 @@ ...@@ -12,10 +12,7 @@
12 12
13 <div class="summary-list" onos-table-resize> 13 <div class="summary-list" onos-table-resize>
14 14
15 - <div class="table-header" 15 + <div class="table-header" onos-sortable-header>
16 - onos-sortable-header
17 - sort-params="sortParams"
18 - sort-callback="sortCallback(sortParams)">
19 <table> 16 <table>
20 <tr> 17 <tr>
21 <td colId="type" class="table-icon" sortable></td> 18 <td colId="type" class="table-icon" sortable></td>
......
...@@ -28,10 +28,7 @@ ...@@ -28,10 +28,7 @@
28 28
29 <div class="summary-list" onos-table-resize> 29 <div class="summary-list" onos-table-resize>
30 30
31 - <div class="table-header" 31 + <div class="table-header" onos-sortable-header>
32 - onos-sortable-header
33 - sort-params="sortParams"
34 - sort-callback="sortCallback(sortParams)">
35 <table> 32 <table>
36 <tr> 33 <tr>
37 <td colId="appId" sortable>Application ID </td> 34 <td colId="appId" sortable>Application ID </td>
......
...@@ -28,10 +28,7 @@ ...@@ -28,10 +28,7 @@
28 28
29 <div class="summary-list" onos-table-resize> 29 <div class="summary-list" onos-table-resize>
30 30
31 - <div class="table-header" 31 + <div class="table-header" onos-sortable-header>
32 - onos-sortable-header
33 - sort-params="sortParams"
34 - sort-callback="sortCallback(sortParams)">
35 <table> 32 <table>
36 <tr> 33 <tr>
37 <td colId="_iconid_state" class="table-icon" sortable></td> 34 <td colId="_iconid_state" class="table-icon" sortable></td>
......
...@@ -46,10 +46,7 @@ ...@@ -46,10 +46,7 @@
46 46
47 <div class="summary-list" onos-table-resize> 47 <div class="summary-list" onos-table-resize>
48 48
49 - <div class="table-header" 49 + <div class="table-header" onos-sortable-header>
50 - onos-sortable-header
51 - sort-params="sortParams"
52 - sort-callback="sortCallback(sortParams)">
53 <table> 50 <table>
54 <tr> 51 <tr>
55 <td colId="id" col-width="60px" sortable>Port ID </td> 52 <td colId="id" col-width="60px" sortable>Port ID </td>
......
...@@ -12,10 +12,7 @@ ...@@ -12,10 +12,7 @@
12 12
13 <div class="summary-list" onos-table-resize> 13 <div class="summary-list" onos-table-resize>
14 14
15 - <div class="table-header" 15 + <div class="table-header" onos-sortable-header>
16 - onos-sortable-header
17 - sort-params="sortParams"
18 - sort-callback="sortCallback(sortParams)">
19 <table> 16 <table>
20 <tr> 17 <tr>
21 <td colId="component" sortable col-width="200px">Component </td> 18 <td colId="component" sortable col-width="200px">Component </td>
......