홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
Committed by Gerrit Code Review
0e7a1bda 1 parent 7b96166b

ONOS-2325 - GUI -- Multiple row highlighting minor bug fixed. 

Change-Id: I60108e7f0f6992e28dd233980a09cc110c39c4a7
Inline Side-by-side
Showing 4 changed files with 31 additions and 25 deletions
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
26 // constants 26 // constants
27 var tableIconTdSize = 33, 27 var tableIconTdSize = 33,
28 pdg = 22, 28 pdg = 22,
29 - flashTime = 2000, 29 + flashTime = 1500,
30 colWidth = 'col-width', 30 colWidth = 'col-width',
31 tableIcon = 'table-icon', 31 tableIcon = 'table-icon',
32 asc = 'asc', 32 asc = 'asc',
...@@ -212,37 +212,43 @@ ...@@ -212,37 +212,43 @@
212 }; 212 };
213 }]) 213 }])
214 214
215 - .directive('onosFlashChanges', ['$log', '$parse', '$timeout', 215 + .directive('onosFlashChanges',
216 - function ($log, $parse, $timeout) { 216 + ['$log', '$parse', '$timeout', 'FnService',
217 + function ($log, $parse, $timeout, fs) {
218 +
217 return function (scope, element, attrs) { 219 return function (scope, element, attrs) {
218 var rowData = $parse(attrs.row)(scope), 220 var rowData = $parse(attrs.row)(scope),
219 id = attrs.rowId, 221 id = attrs.rowId,
220 tr = d3.select(element[0]), 222 tr = d3.select(element[0]),
221 - multiRows = d3.selectAll('.multi-row'), 223 + multi = 'multiRow' in attrs,
222 promise; 224 promise;
223 225
224 scope.$watchCollection('changedData', function (newData) { 226 scope.$watchCollection('changedData', function (newData) {
225 - angular.forEach(newData, function (item) { 227 + var multiRows = null;
226 - function classMultiRows(b) { 228 + if (multi) {
227 - if (!multiRows.empty()) { 229 + // This is a way to identify which rows need to be
228 - multiRows.each(function () { 230 + // highlighted with the first one. It uses the unique
229 - d3.select(this).classed('data-change', b); 231 + // identifier as a class selection. If the unique ID
230 - }); 232 + // has invalid characters (like ':') then it won't work.
233 + multiRows = d3.selectAll('.multi-row-' + rowData[id]);
234 + }
235 +
236 + function classRows(b) {
237 + tr.classed('data-change', b);
238 + if (multiRows) {
239 + multiRows.classed('data-change', b);
231 } 240 }
232 } 241 }
233 242
234 - if (rowData[id] === item[id]) { 243 + if (fs.find(rowData[id], newData, id) > -1) {
235 - tr.classed('data-change', true); 244 + classRows(true);
236 - classMultiRows(true);
237 245
238 promise = $timeout(function () { 246 promise = $timeout(function () {
239 - tr.classed('data-change', false); 247 + classRows(false);
240 - classMultiRows(false);
241 }, flashTime); 248 }, flashTime);
242 } 249 }
243 -
244 - });
245 }); 250 });
251 +
246 scope.$on('$destroy', function () { 252 scope.$on('$destroy', function () {
247 if (promise) { 253 if (promise) {
248 $timeout.cancel(promise); 254 $timeout.cancel(promise);
......
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
56 </tr> 56 </tr>
57 57
58 <tr ng-repeat-start="flow in tableData track by $index" 58 <tr ng-repeat-start="flow in tableData track by $index"
59 - onos-flash-changes row="{{flow}}" row-id="id"> 59 + onos-flash-changes row="{{flow}}" row-id="id" multi-row>
60 <td>{{flow.id}}</td> 60 <td>{{flow.id}}</td>
61 <td>{{flow.appId}}</td> 61 <td>{{flow.appId}}</td>
62 <td>{{flow.groupId}}</td> 62 <td>{{flow.groupId}}</td>
...@@ -68,10 +68,10 @@ ...@@ -68,10 +68,10 @@
68 <td>{{flow.packets}}</td> 68 <td>{{flow.packets}}</td>
69 <td>{{flow.bytes}}</td> 69 <td>{{flow.bytes}}</td>
70 </tr> 70 </tr>
71 - <tr class="multi-row"> 71 + <tr class="multi-row-{{flow.id}}">
72 <td class="selector" colspan="10">{{flow.selector}}</td> 72 <td class="selector" colspan="10">{{flow.selector}}</td>
73 </tr> 73 </tr>
74 - <tr class="multi-row" ng-repeat-end> 74 + <tr class="multi-row-{{flow.id}}" ng-repeat-end>
75 <td class="treatment" colspan="10">{{flow.treatment}}</td> 75 <td class="treatment" colspan="10">{{flow.treatment}}</td>
76 </tr> 76 </tr>
77 </table> 77 </table>
......
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
68 </tr> 68 </tr>
69 69
70 <tr ng-repeat-start="group in tableData track by $index" 70 <tr ng-repeat-start="group in tableData track by $index"
71 - onos-flash-changes row="{{group}}" row-id="id"> 71 + onos-flash-changes row="{{group}}" row-id="id" multi-row>
72 <td>{{group.id}}</td> 72 <td>{{group.id}}</td>
73 <td>{{group.app_id}}</td> 73 <td>{{group.app_id}}</td>
74 <td>{{group.state}}</td> 74 <td>{{group.state}}</td>
...@@ -76,7 +76,7 @@ ...@@ -76,7 +76,7 @@
76 <td>{{group.packets}}</td> 76 <td>{{group.packets}}</td>
77 <td>{{group.bytes}}</td> 77 <td>{{group.bytes}}</td>
78 </tr> 78 </tr>
79 - <tr class="multi-row" ng-repeat-end> 79 + <tr class="multi-row-{{group.id}}" ng-repeat-end>
80 <td class="buckets" colspan="6" 80 <td class="buckets" colspan="6"
81 ng-bind-html="group.buckets"></td> 81 ng-bind-html="group.buckets"></td>
82 </tr> 82 </tr>
......
...@@ -49,17 +49,17 @@ ...@@ -49,17 +49,17 @@
49 </tr> 49 </tr>
50 50
51 <tr ng-repeat-start="intent in tableData track by $index" 51 <tr ng-repeat-start="intent in tableData track by $index"
52 - onos-flash-changes row="{{intent}}" row-id="key"> 52 + onos-flash-changes row="{{intent}}" row-id="key" multi-row>
53 <td>{{intent.appId}}</td> 53 <td>{{intent.appId}}</td>
54 <td>{{intent.key}}</td> 54 <td>{{intent.key}}</td>
55 <td>{{intent.type}}</td> 55 <td>{{intent.type}}</td>
56 <td>{{intent.priority}}</td> 56 <td>{{intent.priority}}</td>
57 <td>{{intent.state}}</td> 57 <td>{{intent.state}}</td>
58 </tr> 58 </tr>
59 - <tr class="multi-row"> 59 + <tr class="multi-row-{{intent.key}}">
60 <td class="resources" colspan="5">{{intent.resources}}</td> 60 <td class="resources" colspan="5">{{intent.resources}}</td>
61 </tr> 61 </tr>
62 - <tr class="multi-row" ng-repeat-end> 62 + <tr class="multi-row-{{intent.key}}" ng-repeat-end>
63 <td class="details" colspan="5">{{intent.details}}</td> 63 <td class="details" colspan="5">{{intent.details}}</td>
64 </tr> 64 </tr>
65 </table> 65 </table>
......