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

Change-Id: I60108e7f0f6992e28dd233980a09cc110c39c4a7

@@ -26,7 +26,7 @@
     // constants
     var tableIconTdSize = 33,
         pdg = 22,
-        flashTime = 2000,
+        flashTime = 1500,
         colWidth = 'col-width',
         tableIcon = 'table-icon',
         asc = 'asc',
@@ -212,37 +212,43 @@
             };
         }])
 
-        .directive('onosFlashChanges', ['$log', '$parse', '$timeout',
-            function ($log, $parse, $timeout) {
+        .directive('onosFlashChanges',
+            ['$log', '$parse', '$timeout', 'FnService',
+            function ($log, $parse, $timeout, fs) {
+
             return function (scope, element, attrs) {
                 var rowData = $parse(attrs.row)(scope),
                     id = attrs.rowId,
                     tr = d3.select(element[0]),
-                    multiRows = d3.selectAll('.multi-row'),
+                    multi = 'multiRow' in attrs,
                     promise;
 
                 scope.$watchCollection('changedData', function (newData) {
-                    angular.forEach(newData, function (item) {
-                        function classMultiRows(b) {
-                            if (!multiRows.empty()) {
-                                multiRows.each(function () {
-                                    d3.select(this).classed('data-change', b);
-                                });
+                    var multiRows = null;
+                    if (multi) {
+                        // This is a way to identify which rows need to be
+                        // highlighted with the first one. It uses the unique
+                        // identifier as a class selection. If the unique ID
+                        // has invalid characters (like ':') then it won't work.
+                        multiRows = d3.selectAll('.multi-row-' + rowData[id]);
+                    }
+
+                    function classRows(b) {
+                        tr.classed('data-change', b);
+                        if (multiRows) {
+                            multiRows.classed('data-change', b);
                         }
                     }
 
-                        if (rowData[id] === item[id]) {
-                            tr.classed('data-change', true);
-                            classMultiRows(true);
+                    if (fs.find(rowData[id], newData, id) > -1) {
+                        classRows(true);
 
                         promise = $timeout(function () {
-                                tr.classed('data-change', false);
-                                classMultiRows(false);
+                            classRows(false);
                         }, flashTime);
                     }
-
-                    });
                 });
+
                 scope.$on('$destroy', function () {
                     if (promise) {
                         $timeout.cancel(promise);

@@ -56,7 +56,7 @@
                 </tr>
 
                 <tr ng-repeat-start="flow in tableData track by $index"
-                    onos-flash-changes row="{{flow}}" row-id="id">
+                    onos-flash-changes row="{{flow}}" row-id="id" multi-row>
                     <td>{{flow.id}}</td>
                     <td>{{flow.appId}}</td>
                     <td>{{flow.groupId}}</td>
@@ -68,10 +68,10 @@
                     <td>{{flow.packets}}</td>
                     <td>{{flow.bytes}}</td>
                 </tr>
-                <tr class="multi-row">
+                <tr class="multi-row-{{flow.id}}">
                     <td class="selector" colspan="10">{{flow.selector}}</td>
                 </tr>
-                <tr class="multi-row" ng-repeat-end>
+                <tr class="multi-row-{{flow.id}}" ng-repeat-end>
                     <td class="treatment" colspan="10">{{flow.treatment}}</td>
                 </tr>
             </table>

@@ -68,7 +68,7 @@
                 </tr>
 
                 <tr ng-repeat-start="group in tableData track by $index"
-                    onos-flash-changes row="{{group}}" row-id="id">
+                    onos-flash-changes row="{{group}}" row-id="id" multi-row>
                     <td>{{group.id}}</td>
                     <td>{{group.app_id}}</td>
                     <td>{{group.state}}</td>
@@ -76,7 +76,7 @@
                     <td>{{group.packets}}</td>
                     <td>{{group.bytes}}</td>
                 </tr>
-                <tr class="multi-row" ng-repeat-end>
+                <tr class="multi-row-{{group.id}}" ng-repeat-end>
                     <td class="buckets" colspan="6"
                         ng-bind-html="group.buckets"></td>
                 </tr>

@@ -49,17 +49,17 @@
                 </tr>
 
                 <tr ng-repeat-start="intent in tableData track by $index"
-                    onos-flash-changes row="{{intent}}" row-id="key">
+                    onos-flash-changes row="{{intent}}" row-id="key" multi-row>
                     <td>{{intent.appId}}</td>
                     <td>{{intent.key}}</td>
                     <td>{{intent.type}}</td>
                     <td>{{intent.priority}}</td>
                     <td>{{intent.state}}</td>
                 </tr>
-                <tr class="multi-row">
+                <tr class="multi-row-{{intent.key}}">
                     <td class="resources" colspan="5">{{intent.resources}}</td>
                 </tr>
-                <tr class="multi-row" ng-repeat-end>
+                <tr class="multi-row-{{intent.key}}" ng-repeat-end>
                     <td class="details" colspan="5">{{intent.details}}</td>
                 </tr>
             </table>